W3.CSS नेविगेशन टैब
लंडन
लन्दन इंग्लैंड की राजधानी है।
यह 9 मिलियन से अधिक निवासियों के महानगरीय क्षेत्र के साथ यूनाइटेड किंगडम का सबसे अधिक आबादी वाला शहर है।
टैब्ड नेविगेशन
टैब्ड नेविगेशन एक वेबसाइट के चारों ओर नेविगेट करने का एक तरीका है।
आम तौर पर, टैब्ड नेविगेशन हाइलाइट किए गए चयनित टैब के साथ व्यवस्थित नेविगेशन बटन (टैब) का उपयोग करता है।
यह उदाहरण समान वर्ग नाम वाले तत्वों का उपयोग करता है (हमारे उदाहरण में "शहर"), और अलग-अलग सामग्री को छिपाने और प्रदर्शित करने के लिए डिस्प्ले:कोई नहीं और डिस्प्ले:ब्लॉक के बीच की शैली को बदलता है:
उदाहरण
<div id="London" class="city">
<h2>London</h2>
<p>London is the capital
of England.</p>
</div>
<div id="Paris" class="city" style="display:none">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div
id="Tokyo" class="city" style="display:none">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
और टैब की गई सामग्री को खोलने के लिए कुछ क्लिक करने योग्य बटन:
उदाहरण
<div class="w3-bar w3-black">
<button class="w3-bar-item w3-button"
onclick="openCity('London')">London</button>
<button
class="w3-bar-item w3-button" onclick="openCity('Paris')">Paris</button>
<button class="w3-bar-item w3-button" onclick="openCity('Tokyo')">Tokyo</button>
</div>
और नौकरी करने के लिए एक जावास्क्रिप्ट:
उदाहरण
function openCity(cityName) {
var i;
var x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(cityName).style.display = "block";
}
जावास्क्रिप्ट समझाया
ओपनसिटी () फ़ंक्शन को तब कहा जाता है जब उपयोगकर्ता मेनू में किसी एक बटन पर क्लिक करता है।
फ़ंक्शन वर्ग नाम "शहर" ( डिस्प्ले = "कोई नहीं" ) के साथ सभी तत्वों को छुपाता है, और दिए गए शहर के नाम ( डिस्प्ले = "ब्लॉक" ) के साथ तत्व प्रदर्शित करता है;
बंद करने योग्य टैब
लंडन
लंदन इंग्लैंड की राजधानी है।
किसी टैब को बंद करने के लिए , टैब कंटेनर के अंदर एक तत्व में onclick="this.parentElement.style.display='none'" जोड़ें:
उदाहरण
<div id="London" class="w3-display-container">
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-topright">X</span>
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>
सक्रिय/वर्तमान टैब
उपयोगकर्ता जिस वर्तमान टैब/पृष्ठ पर है, उसे हाइलाइट करने के लिए, जावास्क्रिप्ट का उपयोग करें और सक्रिय लिंक में एक रंग वर्ग जोड़ें। नीचे दिए गए उदाहरण में, हमने प्रत्येक लिंक में एक "टैबलिंक" वर्ग जोड़ा है। इस तरह, टैब से जुड़े सभी लिंक प्राप्त करना आसान है, और इसे हाइलाइट करने के लिए वर्तमान टैब लिंक को "w3-red" वर्ग दें:
उदाहरण
function openCity(evt, cityName) {
var i, x, tablinks;
x = document.getElementsByClassName("city");
for (i =
0; i < x.length; i++) {
x[i].style.display
= "none";
}
tablinks =
document.getElementsByClassName("tablink");
for (i =
0; i < x.length; i++) {
tablinks[i].className =
tablinks[i].className.replace(" w3-red", "");
}
document.getElementById(cityName).style.display =
"block";
evt.currentTarget.className += "
w3-red";
}
लंबवत टैब
उदाहरण
<nav class="w3-sidebar w3-bar-block w3-light-grey" style="width:130px">
<button class="w3-bar-item w3-button" onclick="openCity(event, 'London')">London</button>
<button class="w3-bar-item w3-button" onclick="openCity(event, 'Paris')">Paris</button>
<button class="w3-bar-item w3-button" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</nav>
एनिमेटेड टैब सामग्री
टैब सामग्री में फीका, ज़ूम या स्लाइड करने के लिए किसी भी w3-चेतन- वर्ग का उपयोग करें:
उदाहरण
<div id="London" class="w3-container city w3-animate-left">
<p>London is the capital city of England.</p>
</div>
टैब्ड इमेज गैलरी
एक छवि पर क्लिक करें:
उदाहरण
<a href="#" class="w3-hover-opacity" onclick="openImg('Nature');">
<img src="img_nature.jpg" alt="Nature">
</a>
<div id="Nature" class="picture w3-display-container">
<img
src="img_nature_wide.jpg" alt="Nature" style="width:100%">
<span onclick="this.parentElement.style.display='none'"
class="w3-display-topright">×</span>
<div
class="w3-display-bottomleft w3-container">Nature</div>
</div>
एक ग्रिड में टैब
तीसरे कॉलम लेआउट में टैब का उपयोग करना। ध्यान दें कि हम पृष्ठभूमि रंग के बजाय सक्रिय टैब में निचला बॉर्डर जोड़ते हैं: