1. Home

W3.CSS Tabs

London is the capital of England

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";
}

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 Paris Tokyo
×

London

London is the capital city of England.

×

Paris

Paris is the capital of France.

×

Tokyo

Tokyo is the capital of Japan.

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>

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";
}

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>

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>

Tabbed Image Gallery

Click on an image:

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

openImg("Nature"); function openImg(imgName) { var i, x; x = document.getElementsByClassName("picture"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } document.getElementById(imgName).style.display = "block"; }

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>

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:

Example

function openCity(evt, cityName) { var i; var x = document.getElementsByClassName("city"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } var activebtn = document.getElementsByClassName("testbtn"); for (i = 0; i < x.length; i++) { activebtn[i].className = activebtn[i].className.replace(" w3-dark-grey", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " w3-dark-grey"; } var mybtn = document.getElementById("myLink"); mybtn.click(); function openc(cityn) { var i; var x = document.getElementsByClassName("cityclose"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } document.getElementById(cityn).style.display = "block"; }

Categories

HTML CSS3 Bootstrap Foundation Sass JavaScript TypeScript JQuery AngularJS React NodeJS Highcharts PHP Python Python3 Django Linux Docker Ruby Java C C ++ Perl Servlet JSP Lua Scala Go ASP C # SQL MySQL SQLite MongoDB Redis Android Swift ionic Kotlin XML tutorial

Contact US