How to create full-page tabs with CSS and JavaScript?

MongoDBDatabaseBig Data Analytics

To create full-page tabs with CSS and JavaScript, the code is as follows −


 Live Demo

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
* {box-sizing: border-box}
body, html {
   height: 100%;
   margin: 0;
.tablink {
   background-color: #555;
   color: white;
   float: left;
   border: none;
   outline: none;
   cursor: pointer;
   padding: 10px 14px;
   font-size: 15px;
.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;}
<button class="tablink" onclick="demo('Home', this, 'blue')">Home</button>
<button class="tablink" onclick="demo('About', this, 'gray')" id="clickme">About</button>
<button class="tablink" onclick="demo('Contact', this, 'orange')">ContactUs</button>
<div id="Home" class="tabcontent">
   <p>This is the Home page.</p>
<div id="About" class="tabcontent">
   <p>This is information about the company.</p>
<div id="Contact" class="tabcontent">
   <p>Contact us for any feedback, query and complaints.</p>
function demo(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"; = color;


This will produce the following output −

Let’s now click the “ContactUs” tab −

Published on 03-Apr-2020 07:51:07