How to Create Navigable Tabs in HTML

Last Updated : 17 Oct, 2024

Navigable tabs in HTML are interactive elements that allow users to switch between different content sections without reloading the page. Tabs organize content into panels, and users can navigate between them by clicking the tab headers, enhancing user experience through better content management.

Here is the preview image:

Navigable Tabs in HTML

Building Navigable Tabs in HTML

HTML Structure: The container includes tabs and tab content sections, with each tab linked to content.
Styling Tabs: The .tabs class styles the tab headers with background, padding, and hover effects for interactivity.
Tab Content: The active class controls content visibility by toggling display: block and display: none.
Tab Click Event: JavaScript listens for clicks on tabs using addEventListener to trigger content changes.
Toggling Content: Upon clicking, JavaScript removes the active class from all content and adds it to the target tab.

Note: For CSS, refer to the ,code under the style tag and for JavaScript refer to the code under the script tag.

Example: In this example, we will create tabs containing different content.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Navigable Tabs in HTML</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: white;
        }

        .container {
            border: 1px solid grey;
            margin: 1rem;
        }

        [data-tab-info] {
            display: none;
        }

        .active[data-tab-info] {
            display: block;
        }

        .tab-content {
            margin-top: 1rem;
            padding-left: 1rem;
            font-size: 20px;
            font-family: sans-serif;
            font-weight: bold;
            color: rgb(0, 0, 0);
        }

        .tabs {
            border-bottom: 1px solid grey;
            background-color: rgb(16, 153, 9);
            font-size: 25px;
            color: rgb(0, 0, 0);
            display: flex;
            margin: 0;
        }

        .tabs span {
            background: rgb(16, 153, 9);
            padding: 10px;
            border: 1px solid rgb(255, 255, 255);
        }

        .tabs span:hover {
            background: rgb(55, 219, 46);
            cursor: pointer;
            color: black;
        }
    </style>
</head>

<body>

    <!-- Body Container -->
    <div class="container">

        <!-- Tabs Detail -->
        <div class="tabs">
            <span data-tab-value="#tab_1">Tab 1</span>
            <span data-tab-value="#tab_2">Tab 2</span>
            <span data-tab-value="#tab_3">Tab 3</span>
        </div>

        <!-- Tab content -->
        <div class="tab-content">
            <div class="tabs__tab active" id="tab_1" data-tab-info>
                <p>Welcome to GeeksforGeek.</p>

            </div>
            <div class="tabs__tab" id="tab_2" data-tab-info>
                <p>Hello Everyone.</p>

            </div>
            <div class="tabs__tab" id="tab_3" data-tab-info>
                <p>Learn cool stuff.</p>

            </div>
        </div>
    </div>
    <script type="text/javascript">

        // function to get each tab details
        const tabs = document.querySelectorAll('[data-tab-value]')
        const tabInfos = document.querySelectorAll('[data-tab-info]')

        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                const target = document
                    .querySelector(tab.dataset.tabValue);
                tabInfos.forEach(tabInfo => {
                    tabInfo.classList.remove('active')
                })
                target.classList.add('active');
            })
        })
    </script>
</body>

</html>