How to Change Tabs on Hover Using HTML, CSS, and JavaScript

Author:

Introduction

Tabs are a useful way to organize content. Users can click on different tabs to show different sections of content. In this tutorial, you will learn how to make tabs change on hover using HTML, CSS, and JavaScript. This means that when a user moves their mouse over a tab, the content will change automatically.

Development Steps

  1. Create the HTML Structure: Set up the layout with tabs and content.
  2. Style the Tabs and Content Using CSS: Use CSS to make the tabs look good and hide the content that is not active.
  3. Add Hover Interactivity Using JavaScript: Use JavaScript to change tabs when the user hovers over them.
  4. Make the Tabs Responsive: Ensure the tabs look good on mobile and tablet devices.

Step 1: Create the HTML Structure

We will start by creating the basic HTML structure. This will include buttons that act as the tabs and sections for the content. The content for each tab will only show when the user hovers over the corresponding tab.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hover Tabs Example</title>
</head>
<body>

    <!-- Step 1: Tabs HTML structure -->
    <div class="tab-header-container">
        <!-- Tab Header Buttons -->
        <div class="tab-header">
            <button class="tab-header-button active" data-tab="1">Tab 1</button>
            <button class="tab-header-button" data-tab="2">Tab 2</button>
            <button class="tab-header-button" data-tab="3">Tab 3</button>
        </div>

        <!-- Tab Content -->
        <div class="tab-content">
            <div class="tab-content-item active" id="tab-1">
                <h2>Content 1</h2>
                <p>This is the content for Tab 1.</p>
            </div>
            <div class="tab-content-item" id="tab-2">
                <h2>Content 2</h2>
                <p>This is the content for Tab 2.</p>
            </div>
            <div class="tab-content-item" id="tab-3">
                <h2>Content 3</h2>
                <p>This is the content for Tab 3.</p>
            </div>
        </div>
    </div>

</body>
</html>

Explanation:

  • tab-header: Contains the buttons (tabs) that users can hover over.
  • tab-content: Contains the content sections. Each section is shown when the user hovers over the corresponding tab.

Step 2: Style the Tabs and Content Using CSS

Next, we will add some basic CSS to style the tabs and content. We will hide the content that is not active and highlight the active tab.

/* Step 2: Basic styles for the tab header and content */
body {
    font-family: Arial, sans-serif;
    background-color: #f7f7f7;
    padding: 20px;
}

.tab-header-container {
    max-width: 800px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.tab-header {
    display: flex;
    background-color: #f1f1f1;
    border-bottom: 2px solid #ddd;
}

.tab-header-button {
    padding: 15px 20px;
    background-color: #f1f1f1;
    border: none;
    cursor: pointer;
    flex: 1;
    text-align: center;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.tab-header-button:hover,
.tab-header-button.active {
    background-color: #fff;
    font-weight: bold;
    border-bottom: 2px solid #fff;
}

.tab-content {
    padding: 20px;
}

.tab-content-item {
    display: none;
}

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

Explanation:

  • .tab-header { display: flex; }: Puts the tab buttons in a row.
  • .tab-header-button:hover: Changes the appearance when the user hovers over the tab.
  • .tab-content-item { display: none; }: Hides the content by default.
  • .tab-content-item.active { display: block; }: Shows the active tab's content.

Step 3: Add Hover Interactivity Using JavaScript

Now, we will use JavaScript to switch between tabs when the user hovers over them. This is done by adding an event listener to each tab button. When a user hovers over a tab, we will make that tab active and show the corresponding content.

<script>
    // Get all tab buttons and content sections
    const tabButtons = document.querySelectorAll('.tab-header-button');
    const tabContentItems = document.querySelectorAll('.tab-content-item');

    // Add hover event listeners to each tab button
    tabButtons.forEach(button => {
        button.addEventListener('mouseenter', () => {
            const tabId = button.getAttribute('data-tab');

            // Remove the active class from all tab buttons and content items
            tabButtons.forEach(btn => btn.classList.remove('active'));
            tabContentItems.forEach(content => content.classList.remove('active'));

            // Add the active class to the hovered button and the corresponding content
            button.classList.add('active');
            document.getElementById(`tab-${tabId}`).classList.add('active');
        });
    });
</script>

Explanation:

  • mouseenter event: Runs the function when the user hovers over the tab button.
  • classList.add('active'): Adds the active class to the hovered tab and the corresponding content.

Step 4: Make the Tabs Responsive

Finally, we will make sure the tabs look good on smaller screens by using CSS media queries. We will stack the tabs vertically on small screens like mobile phones.

/* Responsive Styles */
@media (max-width: 768px) {
    .tab-header {
        flex-direction: column;
    }

    .tab-header-button {
        padding: 10px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .tab-header-button {
        font-size: 12px;
        padding: 8px;
    }
}

Explanation:

  • @media (max-width: 768px): On smaller screens (like tablets), the tabs stack vertically.
  • @media (max-width: 480px): On mobile phones, the font size and padding are smaller to fit the screen better.

Complete Code

Here is the complete code to create hoverable tabs using HTML, CSS, and JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hover Tabs Example</title>
    <style>
        /* Global Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #f7f7f7;
            padding: 20px;
        }

        .tab-header-container {
            max-width: 800px;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .tab-header {
            display: flex;
            background-color: #f1f1f1;
            border-bottom: 2px solid #ddd;
        }

        .tab-header-button {
            padding: 15px 20px;
            background-color: #f1f1f1;
            border: none;
            cursor: pointer;
            flex: 1;
            text-align: center;
            font-size: 16px;
            transition: background-color 0.3s ease;
        }

        .tab-header-button:hover,
        .tab-header-button.active {
            background-color: #fff;
            font-weight: bold;
            border-bottom: 2px solid #fff;
        }

        .tab-content {
            padding: 20px;
        }

        .tab-content-item {
            display: none;
        }

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

        /* Responsive Styles */
        @media (max-width: 768px) {
            .tab-header {
                flex-direction: column;
            }

            .tab-header-button {
                padding: 10px;
                font-size: 14px;
            }
        }

        @media (max-width: 480px) {
            .tab-header-button {
                font-size: 12px;
                padding: 8px;
            }
        }
    </style>
</head>
<body>

    <!-- Tab Header HTML structure -->
    <div class="tab-header-container">
        <!-- Tab Header Buttons -->
        <div class="tab-header">
            <button class="tab-header-button active" data-tab="1">Tab 1</button>
            <button class="tab-header-button" data-tab="2">Tab 2</button>
            <button class="tab-header-button" data-tab="3">Tab 3</button>
        </div>

        <!-- Tab Content -->
        <div class="tab-content">
            <div class="tab-content-item active" id="tab-1">
                <h2>Content 1</h2>
                <p>This is the content for Tab 1.</p>
            </div>
            <div class="tab-content-item" id="tab-2">
                <h2>Content 2</h2>
                <p>This is the content for Tab 2.</p>
            </div>
            <div class="tab-content-item" id="tab-3">
                <h2>Content 3</h2>
                <p>This is the content for Tab 3.</p>
            </div>
        </div>
    </div>

    <!-- JavaScript for hover functionality -->
    <script>
        // Get all tab buttons and content sections
        const tabButtons = document.querySelectorAll('.tab-header-button');
        const tabContentItems = document.querySelectorAll('.tab-content-item');

        // Add hover event listeners to each tab button
        tabButtons.forEach(button => {
            button.addEventListener('mouseenter', () => {
                const tabId = button.getAttribute('data-tab');

                // Remove the active class from all tab buttons and content items
                tabButtons.forEach(btn => btn.classList.remove('active'));
                tabContentItems.forEach(content => content.classList.remove('active'));

                // Add the active class to the hovered button and the corresponding content
                button.classList.add('active');
                document.getElementById(`tab-${tabId}`).classList.add('active');
            });
        });
    </script>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Comments

Post a Comment

Leave Comment