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>