कैसे करें - ग्रिड का विस्तार
CSS और JavaScript के साथ एक विस्तृत ग्रिड बनाने का तरीका जानें।
ग्रिड का विस्तार
इसे "विस्तारित" करने के लिए एक बॉक्स पर क्लिक करें (100% चौड़ाई):
×
बॉक्स 1
आइए दर्द को स्वयं देखें, सीखे हुए को आप से हटने दें, और समझें कि यह आपको शांत करता है। सही त्रुटि का मतलब होगा सुनसान विज्ञापन
×
बॉक्स 2
आइए दर्द को स्वयं देखें, सीखे हुए को आप से हटने दें, और समझें कि यह आपको शांत करता है। सही त्रुटि का मतलब होगा सुनसान विज्ञापन
×
बॉक्स 3
आइए दर्द को स्वयं देखें, सीखे हुए को आप से हटने दें, और समझें कि यह आपको शांत करता है। सही त्रुटि का मतलब होगा सुनसान विज्ञापन
एक विस्तृत ग्रिड बनाएँ
चरण 1) HTML जोड़ें:
उदाहरण
<!-- 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>
चरण 2) सीएसएस जोड़ें:
तीन कॉलम बनाएं:
उदाहरण
/* 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;
}
चरण 3) जावास्क्रिप्ट जोड़ें:
उदाहरण
// 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";
}