CSS और JavaScript से टैब्स कैसे बनाएं?

बेसिक टैब्स इम्प्लीमेंटेशन

CSS और JavaScript से टैब्स बनाने का कोड:

उदाहरण

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .tab {
      overflow: hidden;
      border: 2px solid gray;
      background-color: #FFE4C4;
    }
    .tab button {
      background-color: inherit;
      float: left;
      cursor: pointer;
      padding: 14px 16px;
      font-size: 15px;
    }
    .tab button:hover {
      background-color: gray;
    }
    .tab button.active {
      background-color: #ccc;
    }
    .demo2 {
      display: none;
      padding: 3px 12px;
    }
  </style>
</head>
<body>
  <h2>परीक्षा</h2>
  <p>निम्न परीक्षा जानकारी है:</p>
  <div class="tab">
    <button class="demo" onclick="infofunc(event, 'dates')">परीक्षा तिथियां</button>
    <button class="demo" onclick="infofunc(event, 'centre')">परीक्षा केंद्र</button>
  </div>
  <div id="dates" class="demo2">
    <h3>तिथियां</h3>
    <p>परीक्षा तिथि 25 मार्च को घोषित होगी।</p>
  </div>
  <div id="centre" class="demo2">
    <h3>केंद्र</h3>
    <p>परीक्षा केंद्र 30 मार्च को घोषित होगा।</p>
  </div>
  
  <script>
    function infofunc(e, info) {
      var i, content, links;
      content = document.getElementsByClassName("demo2");
      for (i = 0; i < content.length; i++) {
        content[i].style.display = "none";
      }
      links = document.getElementsByClassName("demo");
      for (i = 0; i < links.length; i++) {
        links[i].className = links[i].className.replace(" active", "");
      }
      document.getElementById(info).style.display = "block";
      e.currentTarget.className += " active";
    }
  </script>
</body>
</html>

आउटपुट

• प्रारंभ में: कोई कंटेंट नहीं दिखता (सभी display: none)
• "परीक्षा तिथियां" क्लिक करने पर: तिथि कंटेंट दिखता है, बटन ग्रे (active) होता है
• "परीक्षा केंद्र" क्लिक करने पर: केंद्र कंटेंट दिखता है, पहला बटन सामान्य, दूसरा ग्रे

कोर लॉजिक

function showTab(tabId, clickedBtn) {
  // 1. सभी पैनल्स छुपाएं
  document.querySelectorAll('.tabpanel').forEach(p => p.style.display = 'none');
  
  // 2. सभी बटन्स से active हटाएं
  document.querySelectorAll('.tabbtn').forEach(b => b.classList.remove('active'));
  
  // 3. चयनित पैनल दिखाएं
  document.getElementById(tabId).style.display = 'block';
  
  // 4. क्लिक किए बटन को active करें
  clickedBtn.classList.add('active');
}

एक्सेसिबल टैब्स (ARIA)

<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="panel1" id="tab1">Tab 1</button>
  <button role="tab" aria-selected="false" aria-controls="panel2" id="tab2">Tab 2</button>
</div>
<div role="tabpanel" id="panel1" aria-labelledby="tab1" hidden>Content 1</div>
<div role="tabpanel" id="panel2" aria-labelledby="tab2" hidden>Content 2</div>