Create custom Tabbed navigation
Tabbed navigation is a common UI pattern used to organize content into separate views, making it easy for users to switch between different sections or categories.
It typically involves a set of tabs (usually displayed horizontally) that the user can click to view different content areas.
Here’s how you can create tabbed navigation using HTML, CSS and a bit of JavaScript.
Click each tab to see code for HTML, CSS and JavaScript.
<div class="tabbed-navigation">
<a href="#" id="tab-one" title="HTML Tab" class="active-tab">HTML</a>
<a href="#" id="tab-two" title="CSS Tab">CSS</a>
<a href="#" id="tab-three" title="JavaScript Tab">JavaScript</a>
</div>
<div id="tab-one-content" class="tab-content active-tab">
<p>HTML tab content</p>
</div>
<div id="tab-two-content" class="tab-content">
<p>CSS tab content</p>
</div>
<div id="tab-three-content" class="tab-content">
<p>JavaScript tab content</p>
</div>
.tabbed-navigation {
display: flex;
flex-direction: column;
}
@media(min-width: 768px) {
.tabbed-navigation {
flex-direction: row;
}
}
.tabbed-navigation a {
text-decoration: none;
text-align: center;
padding: 10px 0;
transition: .4s ease-in-out;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-weight: normal;
font-size: 16px;
line-height: 18px;
min-width: 145px;
border-bottom: 4px solid transparent;
color: #000;
}
.tabbed-navigation a:hover, .tabbed-navigation a.active-tab {
border-bottom: 4px solid #A100FF;
}
.tab-content {
display: none
}
.tab-content.active-tab {
display: block;
}
document.querySelectorAll(".tabbed-navigation a").forEach(function(anchor) {
anchor.addEventListener("click", function(e) {
e.preventDefault();
document.querySelectorAll(".tabbed-navigation a").forEach(function(el) {
el.classList.remove("active-tab");
});
this.classList.add("active-tab");
var tabId = this.id;
document.querySelectorAll(".tab-content").forEach(function(el) {
el.classList.remove("active-tab");
});
document.getElementById(tabId + "-content").classList.add("active-tab");
});
});
In this example above when a element in the .tabbed-navigation is clicked, it becomes the active tab and the corresponding tab content is displayed.
The active-tab class is toggled appropriately to show the selected tab and its content.
