कैसे बनाएं: टैब शीर्षक

CSS और JavaScript के द्वारा टैब शीर्षक का निर्माण सीखें।

स्विच करने वाले टैब शीर्षक बनाएं

पहला कदम - HTML जोड़ें:

<div id="London" class="tabcontent">
  <h1>लंदन</h1>
  <p>लंदन इंग्लैंड की राजधानी है।</p>
</div>
<div id="Paris" class="tabcontent">
  <h1>Paris</h1>
  <p>Paris है फ्रांस की राजधानी.</p>
</div>
<div id="Tokyo" class="tabcontent">
  <h1>Tokyo</h1>
  <p>Tokyo है जापान की राजधानी.</p>
</div>
<div id="Oslo" class="tabcontent">
  <h1>Oslo</h1>
  <p>Oslo है नॉर्वे की राजधानी.</p>
</div>
<button class="tablink" onclick="openCity('London', this, 'red')" id="defaultOpen">London</button>
<button class="tablink" onclick="openCity('Paris', this, 'green')">Paris</button>
<button class="tablink" onclick="openCity('Tokyo', this, 'blue')">Tokyo</button>
<button class="tablink" onclick="openCity('Oslo', this, 'orange')">Oslo</button>
विशिष्ट टैब कंटेंट खोलने वाले बटन बनाएं. सभी class="tabcontent" के <div> एलीमेंट्स डिफ़ॉल्ट में छुपे हैं (CSS और JS के साथ). जब उपयोगकर्ता बटन पर क्लिक करता है - तो यह बटन के "मेल" करने वाला टैब कंटेंट खोलेगा.

दूसरा कदम - एसीएस जोड़ें:

सेट बटन और टैब कंटेंट का शैली:

/* सेट टैब बटन का शैली */
.tablink {
  background-color: #555;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 25%;
}
/* हॉवर पर बटन के पृष्ठभूमि रंग बदलें */
.tablink:hover {
  background-color: #777;
}
/* टैब पृष्ठ की सामग्री के डिफ़ॉल्ट शैली सेट करें */
.tabcontent {
  color: white;
  display: none;
  padding: 50px;
  text-align: center;
}
/* प्रत्येक टैब पृष्ठ की सामग्री के शैली अलग-अलग सेट करें */
#London {background-color:red;}
#Paris {background-color:green;}
#Tokyo {background-color:blue;}
#Oslo {background-color:orange;}

तीसरा - JavaScript जोड़ें

function openCity(cityName, elmnt, color) {
  // डिफ़ॉल्ट रूप से सभी class="tabcontent" के एलेमेंट छुपाएं
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  // सभी टैब लिंक/बटन के पृष्ठभूमि रंग हटाएं
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  // विशिष्ट टैब पृष्ठ की सामग्री दिखाएं
  document.getElementById(cityName).style.display = "block";
  // टैब पृष्ठ की सामग्री खोलने वाले बटन को विशेष रंग जोड़ें
  elmnt.style.backgroundColor = color;
}
// प्रविष्टि id="defaultOpen" का एलेमेंट प्राप्त करें और इसे क्लिक करें
document.getElementById("defaultOpen").click();

खुद आज़ादी से प्रयोग करें

संबंधित पृष्ठ

तूतीकरण:कैसे टैब बनाएं