Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create full-page tabs with CSS and JavaScript?
In this article, we will discuss how to create full-page tabs with CSS and JavaScript.
Full-Page Tabs, like the name suggests, are tabs that are displayed on the entire page instead of a section.
To create a full page tab, you need to set the height of the page to 100%. You can do this using the height property, i.e. you need to create a CSS class, then set the height to 100vh and set this class as a style class of the individual tab elements those you need with full page length.
By creating full page tabs, we are making the navigation of the contents of a web page easier, you just need to click on the respective header to move to the desired page.
Steps to Create full-page Tabs
Following are the steps to create a tab header using JavaScript −
Define a function with three parameters name, element, and color.
Declare the variable tabcontent and assign it button by using class name through document.getElementByClassName to tabcontent variable.
Iterate the for loop and avoid the automatic display by using style property display to none.
Declare the tablinks variable and assign it buttons links, iterate the for loop and change the background color by using tablinks[i].style.backgroundColor.
At last call the name and element parameter and make, document.getElementById(name).style.color = "block" and elemnt.style.backgroundColor = color.
Example
Following is an example to create full-page tabs using CSS and JavaScript –
Example.html
In this example using the HTML code we have created 4 div elements for 4 different tabs and, we have created 4 buttons namely HTML, CSS, JS and React.
In each button we are writing a function for the onclick event which calls the respective div elements.
We are assigning the style tabcontent to all the div elements created.
<button class="tablink" onclick="langName('HTML', this, 'rgb(243, 122, 122)')" id="defaultOpen"> HTML </button>
<button class="tablink" onclick="langName('CSS', this, 'rgb(198, 237, 107)')"> CSS </button>
<button class="tablink" onclick="langName('JAVASCRIPT', this, 'rgb(51, 124, 249)')"> JS </button>
<button class="tablink" onclick="langName('react', this, 'rgb(234, 215, 93)')">React</button>
<div id="HTML" class="tabcontent">
<h1>HTML</h1>
<p>This is <span> HTML</span></p>
</div>
<div id="CSS" class="tabcontent">
<h1>CSS</h1>
<p>This is <span> CSS</span></p>
</div>
<div id="JAVASCRIPT" class="tabcontent">
<h1>JAVASCRIPT</h1>
<p>This is <span> javascript </span></p>
</div>
<div id="react" class="tabcontent">
<h1>React</h1>
<p>This is <span> Reactjs</span></p>
</div>
Example.css
Using the CSS code we are styling the tabs with different background colors and adding hover effect to the head of the tabs.
In addition, we are creating a style named tabcontent where we are setting the height property value to 100vh.
<style>
body {
font-family: "Lato", sans-serif;
}
.tablink {
background-color: rgba(0, 0, 0, 0.5);
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 */
.tabcontent {
color: white;
display: none;
padding: 50px;
text-align: center;
height: 100vh;
}
p {
display: flex;
position: absolute;
text-align: center;
align-items: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: bold;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: black;
background: white;
padding: 15px;
border-radius: 2px;
}
span {
color: red;
padding: 5px;
}
#HTML {
background-color: rgb(243, 122, 122);
}
#CSS {
background-color: rgb(198, 237, 107);
}
#JAVASCRIPT {
background-color: rgb(51, 124, 249);
}
#react {
background-color: rgb(234, 215, 93);
}
</style>
Example.js
In the JavaScript part we trying to switch between the tabs when the user clicks on the respective buttons.
<script>
function langName(name, 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(name).style.display = "block";
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
Complete Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Lato", sans-serif;
}
.tablink {
background-color: rgba(0, 0, 0, 0.5);
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 */
.tabcontent {
color: white;
display: none;
padding: 50px;
text-align: center;
height: 100vh;
}
p {
display: flex;
position: absolute;
text-align: center;
align-items: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: bold;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: black;
background: white;
padding: 15px;
border-radius: 2px;
}
span {
color: red;
padding: 5px;
}
#HTML {
background-color: rgb(243, 122, 122);
}
#CSS {
background-color: rgb(198, 237, 107);
}
#JAVASCRIPT {
background-color: rgb(51, 124, 249);
}
#react {
background-color: rgb(234, 215, 93);
}
</style>
</head>
<body>
<button class="tablink" onclick="langName('HTML', this, 'rgb(243, 122, 122)')" id="defaultOpen"> HTML </button>
<button class="tablink" onclick="langName('CSS', this, 'rgb(198, 237, 107)')"> CSS </button>
<button class="tablink" onclick="langName('JAVASCRIPT', this, 'rgb(51, 124, 249)')"> JS </button>
<button class="tablink" onclick="langName('react', this, 'rgb(234, 215, 93)')">React</button>
<div id="HTML" class="tabcontent">
<h1>HTML</h1>
<p>This is <span> HTML</span></p>
</div>
<div id="CSS" class="tabcontent">
<h1>CSS</h1>
<p>This is <span> CSS</span></p>
</div>
<div id="JAVASCRIPT" class="tabcontent">
<h1>JAVASCRIPT</h1>
<p>This is <span> javascript </span></p>
</div>
<div id="react" class="tabcontent">
<h1>React</h1>
<p>This is <span> Reactjs</span></p>
</div>
<script>
function langName(name, 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(name).style.display = "block";
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</body>
</html>
1K+ Views
