TheBestTutorials.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
<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
<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
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
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 "subhodaya-red" class, to highlight it:
Example
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(" subhodaya-red", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " subhodaya-red";
}
Vertical Tabs
Example
<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>
Animated Tab Content
Use any of the TheBestTutorials-animate-classes to fade, zoom or slide in tab content:
Example
<p>London is the capital city of England.</p>
</div>
Tabbed Image Gallery
Example
<img src="img_nature.jpg" alt="Nature">
</a>
<div id="Nature" class="picture subhodaya-display-container">
<img src="img_nature_wide.jpg" alt="Nature" style="width:100%">
<span onclick="this.parentElement.style.display='none'" class="subhodaya-display-topright">×</span>
<div class="subhodaya-display-bottomleft subhodaya-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: