Tabs Navigation System | HTML, CSS & JavaScript

Tabs Navigation System with HTML, CSS & JavaScript

30 DAYS 30 PROJECT CHALLENGE

Day #07

Project Overview

Tabs Navigation System is a beginner-friendly project built using HTML, CSS, and JavaScript. It allows users to switch between different sections of content without leaving the current webpage or loading a new page. Each tab represents a different section, and clicking on a tab displays its related content.

The active tab is visually highlighted so users can easily understand which section they are currently viewing. JavaScript handles the switching functionality by showing the selected content and hiding the other sections.

This project is useful for beginners who want to understand how interactive navigation systems work. It also demonstrates important concepts such as click events, DOM manipulation, CSS classes, and dynamically showing or hiding content.

Key Features

Multiple Nav tabs: The application features multiple tabs that allow a user to navigate a website or an application between its content sections on a single screen.
Content switching: When a user clicks on a tab, JavaScript displays the content related to that tab while hiding the content of the other sections.
Active tab Highlighting: The currently selected tab receives an active style, making it visually different from the other tabs and helping users identify their current section.
Dynamic Content Display: JavaScript code dynamically updates the content displayed on the page based on the currently open tab.
Click-based navigation: Users can easily switch between sections by clicking on the available navigation tabs without refreshing or leaving the webpage.
Inactive content hidden: Content that does not belong to the currently selected tab remains hidden, helping keep the interface clean and preventing unnecessary information from appearing at the same time.
Smooth User Experience: Tabs present an intuitive way of organizing information around a single topic while providing a user with an easy navigation between multiple related subjects.
Clean and Organized Interface: Tabs group information in a structured manner that allows a user to consume content without distraction by hiding irrelevant content behind inactive tabs.
Responsive Design: Tabs Navigation System can adapt to different screen sizes, allowing users to access and switch between tabs on desktops, tablets, and mobile devices.
Versatile UI component: Tabs offer a degree of flexibility in terms of design and are applicable in most cases involving the display of information including products, dashboards, user profiles, settings, and more.

What You'll Learn

Understand how tab navigation systems work.
Learn how to handle click events using JavaScript.
Practice selecting multiple elements using querySelectorAll().
Understand how to show and hide HTML content dynamically.
Learn how to add and remove CSS classes.
Practice using classList.add() and classList.remove().
Understand how active states improve user interface navigation.
Learn how JavaScript connects a navigation tab with its content section.
Practice updating the DOM based on user interaction.
Understand how CSS can style active and inactive tabs.

HTML Code

HTML creates the basic structure of the Tabs Navigation System. First, the style.css file is linked inside the <head> section so CSS can control the appearance and layout of the tabs and content sections. The main content is placed inside a tabs container, which holds both the navigation buttons and the related content. Each navigation tab represents a different section and can contain a data-tab attribute or another identifier that connects it with the correct content section.

Content area contains separate sections for each tab. These sections have their own IDs or classes so JavaScript can identify which content should be displayed when a user selects a particular tab. One tab and its content section can be marked as active by default when the page first loads. Finally, the script.js file is loaded near the bottom of the <body> so JavaScript can select the tabs and content sections and add the required switching functionality.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Tabs Navigation</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <div class="tabs-container">
    <h2>Tabs Navigation</h2>

    <div class="tabs">
      <button class="tab active" data-tab="tab1">Overview</button>
      <button class="tab" data-tab="tab2">Features</button>
      <button class="tab" data-tab="tab3">Contact</button>
    </div>

    <div class="tab-content active" id="tab1">
      <p>This is the overview content.</p>
    </div>

    <div class="tab-content" id="tab2">
      <p>This section displays features.</p>
    </div>

    <div class="tab-content" id="tab3">
      <p>This is the contact information.</p>
    </div>

  </div>

  <script src="script.js"></script>
</body>
</html>

CSS Code

CSS controls the appearance and layout of the Tabs Navigation System. The main tabs container is styled with suitable width, spacing, padding, background, and rounded corners to create a clean interface. Navigation tabs are arranged in a row using Flexbox and each tab receives padding, spacing, a pointer cursor so users can clearly identify it as an interactive element. The active tab receives a different background, color, border, or underline to distinguish it from inactive tabs.

The content sections are styled to provide enough spacing and make the displayed information easy to read. Inactive content sections can be hidden using CSS, while the active content section remains visible. Responsive CSS rules can also adjust the tab layout for smaller screens.

* {
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #042453;
}

.tabs-container {
  background: #ffffff;
  width: 450px;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}

.tabs {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.tab {
  flex: 1;
  padding: 10px;
  border: none;
  background: #e5e7eb;
  cursor: pointer;
  font-weight: 600;
  border-radius: 6px;
  margin-right: 5px;
}

.tab:last-child {
  margin-right: 0;
}

.tab.active {
  background: #4f46e5;
  color: white;
}

.tab-content {
  display: none;
  font-size: 14px;
  color: #333;
}

.tab-content.active {
  display: block;
}

Javascript Code

JavaScript provides the main functionality of the Tabs Navigation System. First, it selects all navigation tabs and all related content sections from the HTML. A click event listener is added to each tab. When a user clicks on a tab, JavaScript first removes the active class from all tabs and hides or removes the active state from all content sections.

Next, the clicked tab receives the active class, and JavaScript identifies the content section connected to that tab using its ID, class attribute. The related content section is then made visible and receives its active state.

This approach ensures that only the selected tab and its related content are active at one time. Overall, the project demonstrates how event listeners, CSS classes, DOM manipulation, and HTML attributes can work together to create an interactive tab navigation system.

const tabs = document.querySelectorAll(".tab");
const contents = document.querySelectorAll(".tab-content");

tabs.forEach(tab => {
  tab.addEventListener("click", () => {
    const target = tab.dataset.tab;

    tabs.forEach(t => t.classList.remove("active"));
    contents.forEach(c => c.classList.remove("active"));

    tab.classList.add("active");
    document.getElementById(target).classList.add("active");
  });
});