Hoe OM - Uitbreidende rooster
Leer hoe om 'n uitbreidende rooster met CSS en JavaScript te skep.
Uitbreidende rooster
Klik op 'n blokkie om dit te "uitbrei" (100% breedte):
×
Boks 1
Kom ons kyk na die pyn self, laat die geleerdes van jou wegdeins, en verstaan dat dit jou streel. Regte fout sou verlate advertensie beteken
×
Boks 2
Kom ons kyk na die pyn self, laat die geleerdes van jou wegdeins, en verstaan dat dit jou streel. Regte fout sou verlate advertensie beteken
×
Boks 3
Kom ons kyk na die pyn self, laat die geleerdes van jou wegdeins, en verstaan dat dit jou streel. Regte fout sou verlate advertensie beteken
Skep 'n uitbreidende rooster
Stap 1) Voeg HTML by:
Voorbeeld
<!-- The grid: three columns -->
<div class="row">
<div class="column" onclick="openTab('b1');" style="background:green;">Box
1</div>
<div class="column" onclick="openTab('b2');" style="background:blue;">Box
2</div>
<div class="column" onclick="openTab('b3');" style="background:red;">Box
3</div>
</div>
<!-- The expanding grid (hidden by default) -->
<div id="b1" class="containerTab" style="display:none;background:green">
<!-- If you want the ability to close the container, add a close button -->
<span onclick="this.parentElement.style.display='none'" class="closebtn">x</span>
<h2>Box 1</h2>
<p>Lorem ipsum..</p>
</div>
<div id="b2" class="containerTab" style="display:none;background:blue">
<span onclick="this.parentElement.style.display='none'" class="closebtn">x</span>
<h2>Box 2</h2>
<p>Lorem ipsum..</p>
</div>
<div id="b3" class="containerTab" style="display:none;background:red">
<span onclick="this.parentElement.style.display='none'" class="closebtn">x</span>
<h2>Box 3</h2>
<p>Lorem ipsum..</p>
</div>
Stap 2) Voeg CSS by:
Skep drie kolomme:
Voorbeeld
/* The grid: Three equal columns that floats next to each other */
.column
{
float: left;
width: 33.33%;
padding: 50px;
text-align: center;
font-size: 25px;
cursor: pointer;
color: white;
}
.containerTab
{
padding: 20px;
color: white;
}
/* Clear floats after the
columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Closable button inside the image */
.closebtn {
float: right;
color: white;
font-size: 35px;
cursor: pointer;
}
Stap 3) Voeg JavaScript by:
Voorbeeld
// Hide all elements with class="containerTab",
except for the one that matches the clickable grid column
function openTab(tabName) {
var i, x;
x = document.getElementsByClassName("containerTab");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(tabName).style.display = "block";
}