THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

W3.CSS Tabs


London

London is the capital city of England.

It is the most populous city in the United Kingdom, with a metropolitan area of over 13 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.


Tabs (Tabulators)

Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects.

Just create many elements with the same class name:

Example

<div id="London" class="city">
  <h2>London</h2>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="city">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="city">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

Then add some clickable buttons to open the content (single buttons, navigation bar, sidenav, etc..):

Example

<ul class="w3-navbar">
  <li><a href="#" onclick="openCity('London')">London</a></li>
  <li><a href="#" onclick="openCity('Paris')">Paris</a></li>
  <li><a href="#" onclick="openCity('Tokyo')">Tokyo</a></li>
</ul>

And add a JavaScript to select the elements:

Example

openCity("London");

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

First, call openCity() to open "London" (id="London).

Then call open City() with a different city name (id="Paris) when the user clicks on one of the buttons in the menu.

The openCity() function hides all elements (display="none") with the class name "city", and displays the element (display="block") with the given city id.


Active/Current Tab

If you want to highlight the current tab/page the user is on, use JavaScript and add a specific color class to the current tab 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-sidenav w3-light-grey" style="width:130px">
  <a href="#" class="tablink" onclick="openCity(event, 'London')">London</a>
  <a href="#" class="tablink" onclick="openCity(event, 'Paris')">Paris</a>
  <a href="#" class="tablink" onclick="openCity(event, 'Tokyo')">Tokyo</a>
</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


Nature ×
Nature
Fjords ×
Fjords
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: