Creating a full page tabs layout is a great way to organize content in a single-page application. Tabs help keep the user on the same page while providing different views or sections of content. This is especially useful for dashboards, settings pages, or any interface where users need quick access to multiple sections without navigating away.
In this tutorial, we’ll walk through the process of creating a full-page tab system using HTML, CSS, and JavaScript. Before we start, make sure you have a basic understanding of these languages. You don’t need to be an expert, but familiarity with them will help you follow along.
Step 1: Structuring the HTML
The first step in creating a full-page tab system is setting up the HTML structure. You’ll need a container for your tab buttons and separate content sections for each tab. Each tab button should have an attribute that corresponds to its respective content section, allowing JavaScript to determine which section to display when a button is clicked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<title>Full Page Tabs | Coding Zemigle</title>
</head>
<body>
<div class="tab-container">
<div class="tab-header">
<button class="tablink" onclick="openPage('Home', this, '#4361ee')">
<i class="fas fa-home"></i>
<span>Home</span>
</button>
<button class="tablink" onclick="openPage('News', this, '#f72585')" id="defaultOpen">
<i class="fas fa-newspaper"></i>
<span>News</span>
</button>
<button class="tablink" onclick="openPage('Contact', this, '#4cc9f0')">
<i class="fas fa-envelope"></i>
<span>Contact</span>
</button>
<button class="tablink" onclick="openPage('About', this, '#f8961e')">
<i class="fas fa-info-circle"></i>
<span>About</span>
</button>
</div>
<div class="tab-content-container">
<div id="Home" class="tabcontent">
<h3>Welcome Home</h3>
<p>Home isn't just a place, it's a feeling. Discover what makes our community special and find your perfect space.</p>
<button class="tab-btn">Explore More</button>
</div>
<div id="News" class="tabcontent">
<h3>Latest Updates</h3>
<p>Stay informed with our curated news feed. We bring you the most relevant stories from around the world.</p>
<button class="tab-btn">Read Articles</button>
</div>
<div id="Contact" class="tabcontent">
<h3>Get In Touch</h3>
<p>We'd love to hear from you! Whether you have questions or just want to say hello, our team is ready to connect.</p>
<button class="tab-btn">Contact Us</button>
</div>
<div id="About" class="tabcontent">
<h3>Our Story</h3>
<p>We're a passionate team dedicated to creating meaningful experiences through innovative solutions.</p>
<button class="tab-btn">Learn More</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
This structure ensures that all content remains on the same page, and users can switch between different sections without reloading the page. Keeping everything organized with clear identifiers will also help when applying styles and interactivity later.
Step 2: Styling with CSS
Once the structure is in place, the next step is to style the tabs using CSS. You’ll want to make sure the tab buttons are visually distinct and clearly indicate which tab is active. A common approach is to highlight the active tab with a different background color or underline.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body, html {
font-family: 'Kanit', sans-serif;
height: 100%;
padding: 0;
overflow-x: hidden;
background-color: #1b263b;
}
.tab-container {
display: flex;
flex-direction: column;
height: 100vh;
}
.tab-header {
display: flex;
background-color: #1b263b;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
z-index: 10;
}
.tablink {
flex: 1;
background-color: transparent;
border: none;
outline: none;
cursor: pointer;
padding: 20px 16px;
font-family: 'Kanit', sans-serif;
font-size: 16px;
font-weight: 500;
color: rgba(255, 255, 255, 0.7);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.tablink i {
font-size: 20px;
transition: all 0.3s ease;
}
.tablink:hover {
color: white;
background-color: rgba(255, 255, 255, 0.05);
}
.tablink.active {
color: white;
}
.tablink.active::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 3px;
border-radius: 3px 3px 0 0;
background-color: currentColor;
}
.tab-content-container {
flex: 1;
position: relative;
overflow: hidden;
}
.tabcontent {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 30px;
display: flex;
flex-direction: column;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
color: white;
}
.tabcontent.active {
opacity: 1;
transform: translateY(0);
}
.tabcontent h3 {
font-size: 2rem;
margin-bottom: 20px;
font-weight: 500;
}
.tabcontent p {
font-size: 1.1rem;
max-width: 600px;
line-height: 1.6;
margin-bottom: 30px;
opacity: 0.9;
}
.tab-btn {
padding: 12px 30px;
border-radius: 50px;
background-color: white;
color: #1b263b;
border: none;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.tab-btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
#Home { background: linear-gradient(135deg, #4361ee, #3f37c9); }
#News { background: linear-gradient(135deg, #f72585, #b5179e); }
#Contact { background: linear-gradient(135deg, #4cc9f0, #3a0ca3); }
#About { background: linear-gradient(135deg, #f8961e, #f3722c); }
@media (max-width: 768px) {
.tablink {
padding: 15px 8px;
font-size: 14px;
}
.tablink i {
font-size: 18px;
}
.tabcontent {
padding: 30px 20px;
}
.tabcontent h3 {
font-size: 2rem;
}
}
Additionally, the content sections should be hidden by default, except for the active one. CSS will be responsible for toggling visibility based on user interaction. You can also enhance the appearance with animations or smooth transitions to create a better user experience.
Step 3: Adding Interactivity with JavaScript
Now that the layout and styling are in place, JavaScript will be used to handle tab switching. The script will listen for click events on the tab buttons and update the active state accordingly.
function openPage(pageName, elmnt, color) {
// Hide all tab contents
const tabcontents = document.getElementsByClassName("tabcontent");
for (let i = 0; i < tabcontents.length; i++) {
tabcontents[i].classList.remove("active");
}
// Remove active class from all tab buttons
const tablinks = document.getElementsByClassName("tablink");
for (let i = 0; i < tablinks.length; i++) {
tablinks[i].classList.remove("active");
}
// Show current tab and mark button as active
document.getElementById(pageName).classList.add("active");
elmnt.classList.add("active");
// Update button color
document.documentElement.style.setProperty('--primary', color);
}
// Initialize with default tab
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("defaultOpen").click();
});
When a user clicks on a tab, the script will remove the active class from all tabs and their associated content sections, then apply the active class to the selected tab and its corresponding content. This ensures that only one section is visible at a time, improving clarity and user engagement.
You can further enhance the functionality by adding smooth transitions, keyboard navigation, or even storing the active tab in local storage so that users return to the last active tab when they revisit the page.
Implement animations for smoother transitions.
Use media queries to ensure the layout is responsive for different screen sizes. Store the active tab state in local storage or session storage so users can pick up where they left off. Integrate additional JavaScript features, such as AJAX loading, to fetch content dynamically without refreshing the page.
Creating a full-page tab system with HTML, CSS, and JavaScript is a straightforward process that can greatly enhance the user experience on your website. By following the steps outlined above, you can create a clean, responsive tab layout that organizes your content effectively. This approach keeps users engaged without requiring multiple page loads and helps present information in a structured manner.
Feel free to experiment with different styles, layouts, and functionalities to match your specific project needs. With a well-designed tab system, your website can provide an intuitive and seamless browsing experience. Happy coding!