कैसे करें - टैब
CSS और JavaScript के साथ टैब बनाना सीखें।
टैब
टैब एकल पृष्ठ वेब अनुप्रयोगों के लिए या विभिन्न विषयों को प्रदर्शित करने में सक्षम वेब पृष्ठों के लिए एकदम सही हैं:
लंडन
लंदन इंग्लैंड की राजधानी है।
टॉगल करने योग्य टैब बनाएं
चरण 1) HTML जोड़ें:
उदाहरण
<!-- Tab links -->
<div class="tab">
<button class="tablinks" onclick="openCity(event,
'London')">London</button>
<button class="tablinks" onclick="openCity(event,
'Paris')">Paris</button>
<button class="tablinks" onclick="openCity(event,
'Tokyo')">Tokyo</button>
</div>
<!-- Tab content -->
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div
id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris
is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
विशिष्ट टैब सामग्री खोलने के लिए बटन बनाएं। के साथ सभी <div> तत्व class="tabcontent"डिफ़ॉल्ट रूप से छिपे हुए हैं (सीएसएस और जेएस के साथ)। जब उपयोगकर्ता एक बटन पर क्लिक करता है - यह टैब सामग्री को खोलेगा जो इस बटन से "मिलान" करता है।
चरण 2) सीएसएस जोड़ें:
बटन और टैब सामग्री को स्टाइल करें:
उदाहरण
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons that are used to open the tab content */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
/* Change background color of buttons on hover
*/
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active
{
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
चरण 3) जावास्क्रिप्ट जोड़ें:
उदाहरण
function openCity(evt, cityName) {
// Declare all
variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent
= document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove
the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i <
tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to
the button that opened the tab
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
टैब में फीका:
यदि आप टैब सामग्री में फीका करना चाहते हैं, तो निम्न सीएसएस जोड़ें:
उदाहरण
.tabcontent {
animation: fadeEffect 1s; /* Fading effect takes 1 second */
}
/* Go
from zero to full opacity */
@keyframes fadeEffect {
from
{opacity: 0;}
to {opacity: 1;}
}
डिफ़ॉल्ट रूप से एक टैब दिखाएं
पृष्ठ लोड पर एक विशिष्ट टैब खोलने के लिए, निर्दिष्ट टैब बटन पर "क्लिक" करने के लिए जावास्क्रिप्ट का उपयोग करें:
उदाहरण
<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
<script>
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
एक टैब बंद करें
यदि आप किसी विशिष्ट टैब को बंद करना चाहते हैं, तो एक बटन के क्लिक के साथ टैब को छिपाने के लिए जावास्क्रिप्ट का उपयोग करें:
उदाहरण
<!-- Click on the <span> element to close the tab -->
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
<span onclick="this.parentElement.style.display='none'">x</span>
</div>
युक्ति: यह भी देखें कि How To - Vertical Tabs .