Tabs Navigation System | HTML, CSS & JavaScript

Tabs Navigation System with HTML, CSS & JavaScript

30 DAYS 30 PROJECT CHALLENGE

Day #07

Project Overview

A Tabs Navigation System built using HTML, CSS, and JavaScript that allows users to switch between different content sections without reloading the page.
The project focuses on creating an intuitive and responsive tab-based interface with clear active states and smooth content transitions.

Key Features

Click-based navigation between tabs.
Dynamic content switching without page reload.
Active tab highlighting for better user experience.
Clean and responsive layout.
Easy to customize and extend with additional tabs.
Improves content organization and accessibility.

HTML Code

<!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

* {
  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

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");
  });
});