कैसे बनाएं: खड़ी टैब

CSS और JavaScript के उपयोग से खड़ी टैब मेन्यू बनाना सीखें。

खड़ी टैब

टैब पेज एकल पृष्ठ वेब अनुप्रयोग या विभिन्न विषयों को दिखाने वाले वेब पृष्ठ के लिए बहुत उपयुक्त है।

लंदन

लंदन इंग्लैंड की राजधानी शहर है।

पेरिस

पेरिस फ्रांस की राजधानी है।

टोक्यो

टोक्यो जापान की राजधानी है.

स्वयं प्रयोग करें

स्विच करने वाले अड़ेखी टैब को बनाएं

पहला कदम - एचटीएमएल जोड़ें:

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">लंदन</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">पेरिस</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">टोक्यो</button>
</div>
<div id="London" class="tabcontent">
  <h3>लंदन</h3>
  <p>लंदन इंग्लैंड की राजधानी शहर है.</p>
</div>
<div id="Paris" class="tabcontent">
  <h3>पेरिस</h3>
  <p>पेरिस फ्रांस की राजधानी है.</p>
</div>
<div id="Tokyo" class="tabcontent">
  <h3>टोक्यो</h3>
  <p>टोक्यो जापान की राजधानी है.</p>
</div>

विशिष्ट टैब कंटेंट को खोलने के लिए बटन बनाएं. सभी class="tabcontent" का <div> एलिमेंट्स डिफ़ॉल्ट में छुपे हुए हैं (CSS और JS के माध्यम से). जब उपयोगकर्ता बटन पर क्लिक करता है, तो यह उस बटन के 'मेल खाते' टैब कंटेंट को खोलता है.

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

सेटिंग बटन और टैब कंटेंट की स्टाइल:

* {box-sizing: border-box}
/* स्टाइल टैब */
.tab {
  float: left;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  width: 30%;
  height: 300px;
}
/* सेटिंग ऑपन टैब कंटेंट के लिए बटन की स्टाइल */
.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
}
/* होवर पर बटन के पृष्ठभूमि रंग बदलें */
.tab button:hover {
  background-color: #ddd;
}
/* सक्रिय/वर्तमान "टैब बटन" वर्ग बनाएं */
.tab button.active {
  background-color: #ccc;
}
/* टैब के सामग्री के शैली सेट करें */
.tabcontent {
  float: left;
  padding: 0px 12px;
  border: 1px solid #ccc;
  width: 70%;
  border-left: none;
  height: 300px;
}

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

function openCity(evt, cityName) {
  // सभी वे वेरियेबल घोषित करें
  var i, tabcontent, tablinks;
  // class="tabcontent" वाले सभी एलीमेंट लें और उन्हें छुपाएं
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  // class="tablinks" वाले सभी एलीमेंट लें और उनसे "active" वर्ग हटाएं
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  // वर्तमान टैब पृष्ठ दिखाएं और खुलने वाले टैब के लिंक को "active" वर्ग जोड़ें
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

स्वयं प्रयोग करें

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

शिक्षा:कैसे करें: विस्तृत टैब