कैसे बनाएं: टैब

CSS और JavaScript के इस्तेमाल से टैब बनाना सीखें。

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

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

<!-- 标签页链接 -->
<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>
<!-- 标签页内容 -->
<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>

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

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

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

/* टैब के शैली सेट करें */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}
/* टैब कनेंट खोलने के लिए बटन की शैली सेट करें */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}
/* होवर पर बटन के पृष्ठभूमि रंग को बदलें */
.tab button:hover {
  background-color: #ddd;
}
/* सक्रिय/वर्तमान टैब लिंक की श्रेणी बनाएँ */
.tab button.active {
  background-color: #ccc;
}
/* टैब कनेंट के शैली सेट करें */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

तीसरा कदम - 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" के तत्वों को पाएँ और class="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";
}

अपने आप प्रयास करें

टैब पृष्ठ फ़ेड इन

यदि आप टैब पृष्ठ की सामग्री को फ़ेड इन करना चाहते हैं, तो नीचे दिए गए CSS को जोड़ें:

.tabcontent {
  animation: fadeEffect 1s; /* फ़ेड इन-अउट इफ़ेक्ट को 1 सेकंड चलाएं */
}
/* शून्य श्फावारता से निर्वात श्फावारता तक की परिवर्तन */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

अपने आप प्रयास करें

डिफ़ॉल्ट दिखाने वाला टैब

यदि आप पृष्ठ लोड होने के समय विशेष टैब पृष्ठ खोलना चाहते हैं, तो JavaScript का 'क्लिक' विधि का उपयोग करके निर्दिष्ट टैब बटन को 'क्लिक' करें:

<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
<script>
// id="defaultOpen" के लिए एलेमेंट को प्राप्त करें और इसे क्लिक करें
document.getElementById("defaultOpen").click();
</script>

अपने आप प्रयास करें

टैब पृष्ठ बंद करें

यदि आप विशेष टैब पृष्ठ को बंद करना चाहते हैं, तो JavaScript के माध्यम से बटन को क्लिक करके टैब पृष्ठ को छुपाएं:

<!-- छुट्टी <span> एलेमेंट को क्लिक करके टैब पृष्ठ को बंद करें -->
<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>

अपने आप प्रयास करें

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

शिक्षा:कैसे बनाएं: खड़ी टैब