कैसे बनाएं: सम्पूर्ण पृष्ठ टैब

सम्पूर्ण ब्राउज़र विंडो को कवर करने वाले सम्पूर्ण पृष्ठ टैब (फुलस्क्रीन टैब) को कैसे बनाएं।

एकल पृष्ठ टैब बनाएं

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

<button class="tablink" onclick="openPage('Home', this, 'red')">Home</button>
<button class="tablink" onclick="openPage('News', this, 'green')" id="defaultOpen">News</button>
<button class="tablink" onclick="openPage('Contact', this, 'blue')">संपर्क</button>
<button class="tablink" onclick="openPage('About', this, 'orange')">बारे में</button>
<div id="Home" class="tabcontent">
  <h3>घर</h3>
  <p>घर है जहां हृदय है..</p>
</div>
<div id="News" class="tabcontent">
  <h3>समाचार</h3>
  <p>इस उत्कृष्ट दिन की कुछ खबरें!</p>
</div>
<div id="Contact" class="tabcontent">
  <h3>संपर्क</h3>
  <p>संपर्क करें, या कॉफी के एक कप के लिए आएं.</p>
</div>
<div id="About" class="tabcontent">
  <h3>बारे में</h3>
  <p>हम कौन हैं और क्या करते हैं.</p>
</div>

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

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

लिंक और टैब पैनल की शैली (फुल पैनल) सेट करें:

/* बॉडी और डॉक्यूमेंट की ऊंचाई 100% सेट करें, ताकि 'फुल पैनल' सक्षम हो
बॉडी, हैटमल {
  height: 100%;
  मार्गिन: 0;
  फ़ॉन्ट-फैमिली: एरियल;
}
/* टैब पैनलिंक के शैली को सेट करें */
.टैबलिंक {
  बैकग्राउंड-कलर: #555;
  color: white;
  फ्लोट: बाईं;
  बॉर्डर: नहीं;
  आउटलाइन: नहीं;
  कर्सर: पॉइंटर;
  पैडिंग: 14पिक्सल 16पिक्सल;
  font-size: 17px;
  width: 25%;
}
.tablink:hover {
  background-color: #777;
}
/* टैब पृष्ठ की सामग्री के शैली निर्धारित करें (और पृष्ठ के लिए ऊंचाई 100% जोड़ें) */
.tabcontent {
  color: white;
  display: none;
  padding: 100px 20px;
  height: 100%;
}
#Home {background-color: red;}
#News {background-color: green;}
#Contact {background-color: blue;}
#About {background-color: orange;}

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

function openPage(pageName, 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(pageName).style.display = "block";
  // टैब पृष्ठ की सामग्री खोलने वाले बटन को विशेष रंग जोड़ें
  elmnt.style.backgroundColor = color;
}
// पासे id="defaultOpen" का एलेमेंट और इसे क्लिक करें
document.getElementById("defaultOpen").click();

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

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

तालीम:कैसे टैब बनाएं