How to Create Tab Headers using CSS & JavaScript?

Last Updated : 10 May, 2024

Tab headers are a commonly used user interface element in web development. They provide a way to organize content into distinct sections, allowing users to switch between them easily. Each tab represents a different category or topic, and clicking on a tab displays the corresponding content while hiding the others.

Prerequisites:

Steps to Set up the Project:

Create an HTML file with a container for tabs and content.(index.html)
Add CSS styles for tab styling.(styles.css)
Write JavaScript code to toggle the active tab and display corresponding content.(script.js)

Project Structure:

Screenshot-2024-05-08-222742 — Project structure

HTML

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" 
          HTML="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
</head>

<body>

    <div class="navbar">
        <img src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg" alt="logo">
    </div>

    <p>Tab header using HTML, CSS and JavaScript</p>

    <div id="gfg" class="tabHTML">
        <h1>gfg</h1>
        <p>gfg Stands for geeksforgeeks.</p>
    </div>

    <div id="HTML" class="tabHTML">
        <h1>HTML</h1>
        <p>HyperText Markup Language (HTML) is a scripting language that defines
            the structure and content of web pages and applications. .</p>
    </div>

    <div id="CSS" class="tabHTML">
        <h1>CSS</h1>
        <p>CSS stands for Cascading Style Sheets, and it's a language used to
            style HTML documents.</p>
    </div>

    <div id="Javascript" class="tabHTML">
        <h1>Javascript</h1>
        <p>JavaScript (JS) is a text-based programming language used both on the
            client-side and server-side that allows you to make web pages
            interactive.</p>
    </div>

    <button class="tablink" onclick="openCity('gfg', this, 'rgb(49, 39, 39)')"
        id="defaultOpen">gfg</button>
    <button class="tablink"
        onclick="openCity('HTML', this, 'rgb(153, 100, 111)')">
          HTML
      </button>
    <button class="tablink"
        onclick="openCity('CSS', this, 'rgb(10, 90, 31)')">CSS</button>
    <button class="tablink"
        onclick="openCity('Javascript', this, 'rgb(83, 62, 25)')">
          Javascript
      </button>
    <script src="script.js"></script>

</body>

</html>

CSS

body {
    font-family: "Lato", sans-serif;
}

.navbar {
    overflow: hidden;
    background-color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar img {
    width: 50px;
    height: auto;
    padding: 10px 15px;
}

.tablink {
    background-color: #555;
    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 HTML */
.tabHTML {
    color: white;
    display: none;
    padding: 50px;
    text-align: center;
}

#gfg {
    background-color: rgb(49, 39, 39);
}

#HTML {
    background-color: rgb(153, 100, 111);
}

#CSS {
    background-color: rgb(10, 90, 31);
}

#Javascript {
    background-color: rgb(83, 62, 25);
}

JavaScript

//script.js
function openCity(cityName, elmnt, color) {
    let i, tabHTML, tablinks;
    tabHTML = document.getElementsByClassName("tabHTML");
    for (i = 0; i < tabHTML.length; i++) {
        tabHTML[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablink");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].style.backgroundColor = "";
    }
    document.getElementById(cityName).style.display = "block";
    elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

Output:

How to Change Tabs on Hover with CSS and JavaScript ?

ayushbhankr3p

Improve

Article Tags :

How to Create Tab Headers using CSS & JavaScript?

Prerequisites:

Steps to Set up the Project:

Project Structure:

Similar Reads

Thank You!

What kind of Experience do you want to share?