How to create tab headers with CSS and JavaScript?

Javascript Web Development Front End Technology

In this article, we are going to discuss how to create tab headers with CSS and JavaScript.

The header elements represent a container using some introductory content or with the set of navigation links. In general, header elements typically contain one or more elements.

Tab headers represent the content present in each tab or provide some navigation links that links the user to any tab they click on.

Steps to Create Tab Headers

The steps to create a tab header using the JavaScript are given below −

Define a function with two parameters evt and name.
Declare the variable tabcontent and assign it button by using class name through document.getElementByClassName to tabcontent variable.
Iterate the for loop and avoide the automatic display by using style property display is none.
Declare the tablinks variable and assign it buttons links, iterate the for loop and make the button active by using tablinks.className.replace("aactive")
At last call the evt and name parameter and make, name display block and evt class active.

Example

Following is an example to create headers using CSS and JavaScript −

Example.html

In this example using the HTML code we have created 3 div elements for 3 different tabs and, we have created 3 buttons namely HTML, CSS, and JAVASCRIPT.

In each button we are writing a function for the onclick event which calls the respective div elements.

<body>
   <div class="tab">
      <button class="tablinks" onclick="langName(event, 'HTML')">HTML</button>
      <button class="tablinks" onclick="langName(event, 'CSS')">CSS</button>
      <button class="tablinks" onclick="langName(event, 'JAVASCRIPT')">
         JAVASCRIPT
      </button>
      </div>
      <div id="HTML" class="tabcontent">
         <h3>HTML</h3>
         <p>This is Html</p>
      </div>
      <div id="CSS" class="tabcontent">
         <h3>CSS</h3>
         <p>This is CSS</p>
      </div>
      <div id="JAVASCRIPT" class="tabcontent">
         <h3>Javascript</h3>
         <p>This is Javascript</p>
      </div>

Example.css

Using the CSS code we are styling the tabs button with different background colors and adding hover effect to the head of the tabs.

<style>
   body {
      font-family: Arial;
   }
   /* Style the tab */
   .tab {
      overflow: hidden;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
   }
   /* Style the buttons inside the tab */
   .tab button {
      background-color: #f1f1f1;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 14px 16px;
      transition: 0.3s;
      font-size: 17px;
   }
   /* Change background color of buttons on hover */
   .tab button:hover {
      background-color: rgb(173, 150, 232);
   }
   /* Create an active/current tablink class */
   .tab button.active {
      background-color: rgb(173, 150, 232);;
   }
   /* Style the tab content */
   .tabcontent {
      text-align: center;
      display: none;
      padding: 6px 12px;
      -webkit-animation: fadeEffect 1s;
      animation: fadeEffect 1s;
   }
</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(evt, name) {
      var i, tabcontent, tablinks;
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i < tabcontent.length; i++) {
         tabcontent[i].style.display = "none";
      }
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i < tablinks.length; i++) {
         tablinks[i].className = tablinks[i].className.replace(" active", "");
      }
      document.getElementById(name).style.display = "block";
      evt.currentTarget.className += " active";
   }
</script>

Complete Example

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <style>
      body {
         font-family: Arial;
      }
      /* Style the tab */
      .tab {
         overflow: hidden;
         border: 1px solid #ccc;
         background-color: #f1f1f1;
      }
      /* Style the buttons inside the tab */
      .tab button {
         background-color: #f1f1f1;
         float: left;
         border: none;
         outline: none;
         cursor: pointer;
         padding: 14px 16px;
         transition: 0.3s;
         font-size: 17px;
      }
      /* Change background color of buttons on hover */
      .tab button:hover {
         background-color: rgb(173, 150, 232);
      }
      /* Create an active/current tablink class */
      .tab button.active {
         background-color: rgb(173, 150, 232);;
      }
      /* Style the tab content */
      .tabcontent {
         text-align: center;
         display: none;
         padding: 6px 12px;
         -webkit-animation: fadeEffect 1s;
         animation: fadeEffect 1s;
      }
   </style>
</head>
<body>
   <div class="tab">
   <button class="tablinks" onclick="langName(event, 'HTML')">HTML</button>
   <button class="tablinks" onclick="langName(event, 'CSS')">CSS</button>
   <button class="tablinks" onclick="langName(event, 'JAVASCRIPT')">
      JAVASCRIPT
   </button>
   </div>
   <div id="HTML" class="tabcontent">
      <h3>HTML</h3>
      <p>This is Html</p>
   </div>
   <div id="CSS" class="tabcontent">
      <h3>CSS</h3>
      <p>This is CSS</p>
   </div>
   <div id="JAVASCRIPT" class="tabcontent">
      <h3>Javascript</h3>
      <p>This is Javascript</p>
   </div>
   <script>
      function langName(evt, name) {
         var i, tabcontent, tablinks;
         tabcontent = document.getElementsByClassName("tabcontent");
         for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
         }
         tablinks = document.getElementsByClassName("tablinks");
         for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
         }
         document.getElementById(name).style.display = "block";
         evt.currentTarget.className += " active";
      }
   </script>
</body>
</html>