Menu
How TO – Full Page Tabs
Learn how to create full page tabs, that covers the entire browser window, with CSS and JavaScript.
Full Page Tabs
Click on the links to display the “current” page:
Home
Home is where the heart is..
News
Some news this fine day!
Contact
Get in touch, or swing by for a cup of coffee.
About
Who we are and what we do.
Try it Yourself
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
* {box-sizing: border-box}
/* Set height of body and the document to 100% */
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;}
</style>
</head>
<body>
<button onclick=”openPage(‘Home’, this, ‘red’)”>Home</button>
<button onclick=”openPage(‘News’, this, ‘green’)” id=”defaultOpen”>News</button>
<button onclick=”openPage(‘Contact’, this, ‘blue’)”>Contact</button>
<button onclick=”openPage(‘About’, this, ‘orange’)”>About</button>
<div id=”Home”>
<h3>Home</h3>
<p>Home is where the heart is..</p>
</div>
<div id=”News”>
<h3>News</h3>
<p>Some news this fine day!</p>
</div>
<div id=”Contact”>
<h3>Contact</h3>
<p>Get in touch, or swing by for a cup of coffee.</p>
</div>
<div id=”About”>
<h3>About</h3>
<p>Who we are and what we do.</p>
</div>
<script>
function openPage(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;
}
// Get the element with id=”defaultOpen” and click on it
document.getElementById(“defaultOpen”).click();
</script>
</body>
</html>
Create One Page Tabs
Step 1) Add HTML:
Example
<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>
Create buttons to open specific tab content. All <div> elements with class="tabcontent" are hidden by default (with CSS & JS). When the user clicks on a button – it will open the tab content that “matches” this button.
Step 2) Add CSS:
Style the links and the tab content (full page):
Example
/* 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;}
Step 3) Add JavaScript:
Example
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
* {box-sizing: border-box}
/* Set height of body and the document to 100% */
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;}
</style>
</head>
<body>
<button onclick=”openPage(‘Home’, this, ‘red’)”>Home</button>
<button onclick=”openPage(‘News’, this, ‘green’)” id=”defaultOpen”>News</button>
<button onclick=”openPage(‘Contact’, this, ‘blue’)”>Contact</button>
<button onclick=”openPage(‘About’, this, ‘orange’)”>About</button>
<div id=”Home”>
<h3>Home</h3>
<p>Home is where the heart is..</p>
</div>
<div id=”News”>
<h3>News</h3>
<p>Some news this fine day!</p>
</div>
<div id=”Contact”>
<h3>Contact</h3>
<p>Get in touch, or swing by for a cup of coffee.</p>
</div>
<div id=”About”>
<h3>About</h3>
<p>Who we are and what we do.</p>
</div>
<script>
function openPage(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;
}
// Get the element with id=”defaultOpen” and click on it
document.getElementById(“defaultOpen”).click();
</script>
</body>
</html>