Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

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:


Nature ×
Nature
Snow ×
French Alps
Mountains ×
Mountains
Lights ×
Northern Lights

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">&times;</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:


×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.