JavaScript Tabs Implementation

JavaScript tabs provide a great way to present content in a compact and organized manner, allowing users to navigate between different sections without loading new pages. This feature enhances the user experience by keeping the interface clean and efficient. In this tutorial, you will learn how to create your own tabbed interface using HTML, CSS, and JavaScript.

1. Introduction

Tabs are a type of UI component that organizes content into manageable sections. Instead of overwhelming users with too much information at once, tabs enable the display of one section at a time, improving readability and navigation.

2. How It Works

The core functionality of tabs revolves around a well-defined structure where each tab is linked to a corresponding content section. When a user clicks on a tab, the application needs to hide the current content and display the selected one. This interaction is handled using JavaScript, which modifies the DOM to show or hide elements.

3. Create HTML Structure

The HTML structure for creating tabs consists of two main parts: the tab links and the tab content sections. Below is a basic structure you can use:

<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'Tab1')">Tab 1</button>
  <button class="tablinks" onclick="openTab(event, 'Tab2')">Tab 2</button>
  <button class="tablinks" onclick="openTab(event, 'Tab3')">Tab 3</button>
</div>

<div id="Tab1" class="tabcontent">
  <h3>Tab 1</h3>
  <p>Content for Tab 1 goes here.</p>
</div>

<div id="Tab2" class="tabcontent">
  <h3>Tab 2</h3>
  <p>Content for Tab 2 goes here.</p>
</div>

<div id="Tab3" class="tabcontent">
  <h3>Tab 3</h3>
  <p>Content for Tab 3 goes here.</p>
</div>

4. Style Tabs With CSS

Next, let’s style the tabs to improve their appearance and make them more visually appealing. Here’s some basic CSS you can start with:

.tab {
  display: flex;
  justify-content: space-around;
}

.tab button {
  background-color: #f1f1f1;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.tab button:hover {
  background-color: #ddd;
}

.tabcontent {
  display: none;
  border: 1px solid #ccc;
  margin-top: 10px;
  padding: 20px;
}

.active {
  background-color: #ccc;
}

5. Add JavaScript for Functionality

The functionality of the tabs will be implemented using JavaScript. The script will handle the clicking of the tabs and manage which content to show or hide:

function openTab(evt, tabName) {
  var i, tabcontent, tablinks;

  // Hide all tab contents
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Remove the active class from all tabs
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // Show the current tab content and add an active class to the clicked tab
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}

// Automatically open the first tab
document.getElementsByClassName("tablinks")[0].click();

6. Complete Example

Combining all of the above, here is the complete implementation of a tabbed interface:

<!DOCTYPE html>
<html>
<head>
  <style>
    .tab {
      display: flex;
      justify-content: space-around;
    }

    .tab button {
      background-color: #f1f1f1;
      border: none;
      padding: 10px 20px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .tab button:hover {
      background-color: #ddd;
    }

    .tabcontent {
      display: none;
      border: 1px solid #ccc;
      margin-top: 10px;
      padding: 20px;
    }

    .active {
      background-color: #ccc;
    }
  </style>
</head>

<body>

<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'Tab1')">Tab 1</button>
  <button class="tablinks" onclick="openTab(event, 'Tab2')">Tab 2</button>
  <button class="tablinks" onclick="openTab(event, 'Tab3')">Tab 3</button>
</div>

<div id="Tab1" class="tabcontent">
  <h3>Tab 1</h3>
  <p>Content for Tab 1 goes here.</p>
</div>

<div id="Tab2" class="tabcontent">
  <h3>Tab 2</h3>
  <p>Content for Tab 2 goes here.</p>
</div>

<div id="Tab3" class="tabcontent">
  <h3>Tab 3</h3>
  <p>Content for Tab 3 goes here.</p>
</div>

<script>
  function openTab(evt, tabName) {
    var i, tabcontent, tablinks;

    // Hide all tab contents
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
    }

    // Remove the active class from all tabs
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    // Show the current tab content and add an active class to the clicked tab
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
  }

  // Automatically open the first tab
  document.getElementsByClassName("tablinks")[0].click();
</script>

</body>
</html>

7. Conclusion

In this tutorial, we covered the essential aspects of creating a tabbed interface using HTML, CSS, and JavaScript. We discussed the importance of tabs in user interface design, how to create the structure, style them, and add dynamic functionality. Implementing tabs on your website can greatly enhance navigation and make it easier for users to find the information they need.

FAQ

Question	Answer
Do I need to include external libraries for tabs?	No, the example provided uses only vanilla JavaScript and basic HTML/CSS.
Can I customize the style of the tabs?	Yes, you can modify the CSS to change the colors, fonts, and sizes as per your design preferences.
How can I add more tabs?	To add more tabs, simply create additional buttons in the tab section and corresponding content divisions, and ensure to link them using the onclick attribute.

askthedev.com Latest Articles