CSS और JavaScript के साथ फुल-पेज टैब कैसे बनाएं?

CSS और JavaScript का उपयोग करके फुल-पेज टैब इंटरफेस बनाने के लिए, टैब बटन को टॉप पर रखें और प्रत्येक टैब के लिए फुल-व्यूपोर्ट ऊंचाई सामग्री पैनल बनाएं, JavaScript के साथ दृश्यता टॉगल करें।

पूर्ण HTML/CSS/JS उदाहरण

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* { box-sizing: border-box; }
body, html {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
}
.tablink {
    background-color: #555;
    color: white;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px 14px;
    font-size: 15px;
    width: 33.33%;
}
.tablink:hover {
    background-color: black;
}
.tabcontent {
    color: white;
    display: none;
    padding: 100px 20px;
    height: 100%;
}
#Home { background-color: blue; }
#About { background-color: gray; }
#Contact { background-color: orange; }
</style>
</head>
<body>

<button class="tablink" onclick="openTab('Home', this, 'blue')">Home</button>
<button class="tablink" onclick="openTab('About', this, 'gray')" id="defaultOpen">About</button>
<button class="tablink" onclick="openTab('Contact', this, 'orange')">Contact Us</button>

<div id="Home" class="tabcontent">
    <h3>Home</h3>
    <p>This is the Home page.</p>
</div>

<div id="About" class="tabcontent">
    <h3>About</h3>
    <p>This is information about the company.</p>
</div>

<div id="Contact" class="tabcontent">
    <h3>Contact Us</h3>
    <p>Contact us for any feedback, query and complaints.</p>
</div>

<script>
function openTab(pageName, elmnt, color) {
    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(pageName).style.display = "block";
    elmnt.style.backgroundColor = color;
}

// डिफ़ॉल्ट टैब खोलें
document.getElementById("defaultOpen").click();
</script>

</body>
</html>

कैसे काम करता है

1. HTML: तीन बटन (.tablink) और तीन सामग्री डिव (.tabcontent) जिनके अद्वितीय आईडी हैं।
2. CSS: body, html {height:100%} फुल व्यूपोर्ट ऊंचाई सुनिश्चित करता है। .tabcontent डिफ़ॉल्ट रूप से छुपा हुआ है (display:none)।
3. JavaScript: openTab() सभी सामग्री डिव को छुपाता है, सभी टैब बटन रंग रीसेट करता है, फिर चयनित सामग्री दिखाता है और सक्रिय टैब को हाइलाइट करता है।
4. डिफ़ॉल्ट: पेज लोड पर defaultOpen बटन पर क्लिक अनुकरण करता है।

सुधार

• ARIA एक्सेसिबिलिटी: role="tablist", role="tab", aria-selected, aria-controls जोड़ें।
• कीबोर्ड नेविगेशन: टैब्स के बीच तीर कुंजियों को संभालें।
• रिस्पॉन्सिव: मोबाइल पर टैब्स को स्टैक करने के लिए मीडिया क्वेरीज़।
• ES6+: const/let, एरो फंक्शन्स, classList का उपयोग करें।

आउटपुट पूर्वावलोकन

पहले "About" टैब सक्रिय के साथ रेंडर किया गया पेज दिखाता है। "Contact Us" पर क्लिक करने से इसकी सामग्री नारंगी पृष्ठभूमि के साथ दिखाई देती है।