W3.CSS Navigation Tabs
London
London is the capital of England.
It is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Paris
Paris is the capital of France.
The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.
Tokyo
Tokyo is the capital of Japan.
It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.
Tabbed Navigation
Tabbed navigation is a way to navigate around a website.
Normally, tabbed navigation uses navigation buttons (tabs) arranged together with the selected tab highlighted.
This example uses elements with the same class name ("city" in our example), and changes the style between display:none and display:block to hide and display different content:
Example
<div id="London" class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div id="Paris" class="city" style="display:none">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="city" style="display:none">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
And some clickable buttons to open the tabbed content:
Example
<div class="w3-bar w3-black">
<button class="w3-bar-item w3-button" onclick="openCity('London')">London</button>
<button class="w3-bar-item w3-button" onclick="openCity('Paris')">Paris</button>
<button class="w3-bar-item w3-button" onclick="openCity('Tokyo')">Tokyo</button>
</div>
And a JavaScript to do the job:
Example
function openCity(cityName) {
var i;
var x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(cityName).style.display = "block";
}
Try It Yourself »
JavaScript Explained
The openCity() function is called when the user clicks on one of the buttons in the menu.
The function hides all elements with the class name "city" (display="none"), and displays the element with the given city name (display="block");
Closable Tabs
London
London is the capital city of England.
To close a tab, add onclick="this.parentElement.style.display='none'" to an element inside the tab container:
Example
<div id="London" class="w3-display-container">
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-topright">X</span>
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>
Try It Yourself »
Active/Current Tab
To highlight the current tab/page the user is on, use JavaScript and add a color class to the active link. In the example below, we have added a "tablink" class to each link. That way, it is easy to get all links that is associated with tabs, and give the current tab link a "w3-red" class, to highlight it:
Example
function openCity(evt, cityName) {
var i, x, tablinks;
x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < x.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " w3-red";
}
Try It Yourself »
Vertical Tabs
Example
<nav class="w3-sidebar w3-bar-block w3-light-grey" style="width:130px">
<button class="w3-bar-item w3-button" onclick="openCity(event, 'London')">London</button>
<button class="w3-bar-item w3-button" onclick="openCity(event, 'Paris')">Paris</button>
<button class="w3-bar-item w3-button" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</nav>
Try It Yourself »
Animated Tab Content
Use any of the w3-animate-classes to fade, zoom or slide in tab content:
Example
<div id="London" class="w3-container city w3-animate-left">
<p>London is the capital city of England.</p>
</div>
Try It Yourself »
Tabbed Image Gallery
Click on an image:
Example
<a href="javascript:void(0)" class="w3-hover-opacity" onclick="openImg('Nature');">
<img src="img_nature.jpg" alt="Nature">
</a>
<div id="Nature" class="picture w3-display-container">
<img src="img_nature_wide.jpg" alt="Nature" style="width:100%">
<span onclick="this.parentElement.style.display='none'" class="w3-display-topright">×</span>
<div class="w3-display-bottomleft w3-container">Nature</div>
</div>
Try It Yourself »
Tabs in a Grid
Using tabs in a third column layout. Note that we add a bottom border to the active tab, instead of a background color:
