कैसे करें - पूर्ण पृष्ठ टैब
सीएसएस और जावास्क्रिप्ट के साथ संपूर्ण पृष्ठ टैब बनाना सीखें, जो संपूर्ण ब्राउज़र विंडो को कवर करता है।
पूरा पेज टैब
"वर्तमान" पृष्ठ प्रदर्शित करने के लिए लिंक पर क्लिक करें:
समाचार
कुछ खबरें इस अच्छे दिन!
एक पेज टैब बनाएं
चरण 1) 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')">Contact</button>
<button class="tablink" onclick="openPage('About',
this, 'orange')">About</button>
<div id="Home" class="tabcontent">
<h3>Home</h3>
<p>Home
is where the heart is..</p>
</div>
<div id="News" class="tabcontent">
<h3>News</h3>
<p>Some news this fine day!</p>
</div>
<div
id="Contact" class="tabcontent">
<h3>Contact</h3>
<p>Get
in touch, or swing by for a cup of coffee.</p>
</div>
<div id="About" class="tabcontent">
<h3>About</h3>
<p>Who we are and what we do.</p>
</div>
विशिष्ट टैब सामग्री खोलने के लिए बटन बनाएं। के साथ सभी <div> तत्व class="tabcontent"डिफ़ॉल्ट रूप से छिपे हुए हैं (सीएसएस और जेएस के साथ)। जब उपयोगकर्ता एक बटन पर क्लिक करता है - यह टैब सामग्री को खोलेगा जो इस बटन से "मिलान" करता है।
चरण 2) सीएसएस जोड़ें:
लिंक और टैब सामग्री को स्टाइल करें (पूर्ण पृष्ठ):
उदाहरण
/* Set height of body and the document to 100% to enable "full page tabs" */
body, html {
height: 100%;
margin: 0;
font-family: Arial;
}
/* Style tab links */
.tablink {
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 25%;
}
.tablink:hover {
background-color: #777;
}
/* Style the tab content (and add
height:100% for full page content) */
.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;}
चरण 3) जावास्क्रिप्ट जोड़ें:
उदाहरण
function
openPage(pageName, elmnt, color) {
// Hide all
elements with class="tabcontent" by default */
var i,
tabcontent, tablinks;
tabcontent =
document.getElementsByClassName("tabcontent");
for (i =
0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Remove the background color of all tablinks/buttons
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
// Show the specific tab content
document.getElementById(pageName).style.display = "block";
// Add the specific color to the button used to open the tab content
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen"
and click on it
document.getElementById("defaultOpen").click();
युक्ति: यह भी देखें कि How To - Tabs .