How to Create Full-Page Tabs using CSS & JavaScript?

Last Updated : 14 May, 2024

Tabs are a common UI pattern used to organize content into multiple sections within a single page. In this article, we'll explore how to create full-page tabs using CSS and JavaScript. Full-page tabs allow users to switch between different sections of content while maintaining a clean and intuitive user interface.

Approach:

Set up a container with tab headers and corresponding tab content sections.
Apply CSS styles to the tabs and set the height of the tab content to fill the viewport for a visually appealing layout.
Implement a function to handle tab switching dynamically based on user clicks.
Attach the tab-switching function to the onclick event of each tab header to enable interactivity.
Toggle the "active" class on the tab content sections to show the selected tab while hiding others for seamless user experience.
Consider adding transitions or animations to improve the visual feedback when switching between tabs for a polished user interface.

Example: Implementation to design full-page tabs using CSS and JavaScript

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
</head>
<link rel="stylesheet" href="style.css">

<body>
    <div class="container">
        <div class="tab-header">
            <div class="tab-link" onclick="showTab(0)">
                HTML
            </div>
            <div class="tab-link" onclick="showTab(1)">
                CSS
            </div>
            <div class="tab-link" onclick="showTab(2)">
                JavaScript
            </div>
            <div class="tab-link" onclick="showTab(3)">
                React
            </div>
        </div>
        <div class="tab-content active">
            <h1>HTML</h1>
            <p>
                HTML, which stands for
                <span>Hyper Text Markup Language</span>,
                is the standard markup language for
                creating web pages. It describes the
                structure of a web page semantically
                and is the first language you
                learn when diving into web development.
            </p>
        </div>
        <div class="tab-content">
            <h1>CSS</h1>
            <p>
                CSS, which stands for
                <span>Cascading Style Sheets</span>,
                is used to style the layout of a web page.
                It enables you to control the appearance
                of your HTML elements, including colors,
                fonts, margins, and more.
            </p>
        </div>
        <div class="tab-content">
            <h1>JavaScript</h1>
            <p>
                JavaScript is a high-level, interpreted programming
                language that adds interactivity and dynamic behavior
                to web pages. With JavaScript, you can manipulate
                HTML and CSS, handle user events, and communicate with
                servers to create powerful web applications.
            </p>
        </div>
        <div class="tab-content">
            <h1>React</h1>
            <p>
                React is a JavaScript library for building user interfaces.
                It allows you to create reusable UI
                components and manage the state of your
                application efficiently. React's declarative syntax and
                component-based architecture make it easy to '
                build complex web applications with ease.
            </p>
        </div>
    </div>
    <script src="script.js"> </script>
</body>

</html>

CSS

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    color: #333;
}

.container {
    max-width: 100vw;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    height: 100vh;
}

.tab-header {
    display: flex;
}

.tab-link {
    flex: 1;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    background-color: #4CAF50;
    color: white;
    transition: background-color 0.3s ease;
}

.tab-link:hover {
    background-color: #45a049;
}

.tab-content {
    padding: 30px;
    display: none;
    height: 100vh;
    overflow-y: auto;
}

.active {
    display: block;
}

h1 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #4CAF50;
}

p {
    line-height: 1.6;
}

span {
    color: #FF5722;
}