Introduction
This chapter demonstrates about the W3CSS Tabs which are perfect for the single page web applications and following are the concepts covered in this chapter.
- Tabulators
- Different Tabs
Description
Tabs are perfect for single page applications and for web pages which are capable of displaying several subjects In order to create the tabs initially user need to create some elements with same class names then add some clickable buttons then add JavaScript to the selected elements these are completely shown in below image.
The code below demonstrates to creating the tabs as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Tabs</h2>
<p>Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects. Click on the links below.</p>
</div>
<ul class="w3-navbar w3-black">
<li><a href="javascript:void(0)" onclick="openTutorials('HTML')">HTML</a></li>
<li><a href="javascript:void(0)" onclick="openTutorials('CSS')">CSS</a></li>
<li><a href="javascript:void(0)" onclick="openTutorials('W3.CSS')">W3.CSS</a></li>
</ul>
<div id="HTML" class="Tutorials">
<h2>HTML</h2>
<p>Hyper Text Markup Language.</p>
</div>
<div id="CSS" class="Tutorials">
<h2>CSS</h2>
<p>Cascading Style Sheets.</p>
</div>
<div id="W3.CSS" class="Tutorials">
<h2>W3.CSS</h2>
<p>Cascading Style Sheets by W3.CSS.</p>
</div>
<script>
openTutorials("HTML")
function openTutorials(tutorialsName) {
var i;
var x = document.getElementsByClassName("Tutorials");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(tutorialsName).style.display = "block";
}
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image. 
In the above code JavaScript which call openTutorial() is used to open id=HTML similarly user can open the another elements.
Description
W3.CSS Tabs have different types of tabs which are used for different purposes following are some types as shown below.
Active Tabs
If user want to high late the current tab where the user is on then user need to use JavaScript and add specific color to the current tab link. The code below demonstrates to adding colors to the Active Tabs as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
.city {display:none;}
</style>
<body>
<div class="w3-container">
<h2>Active Tabs</h2>
<p>Click on the links below:</p>
<ul class="w3-navbar w3-black">
<li><a href="javascript:void(0)" class="tablink" onclick="openCity(event, 'HTML');">HTML</a></li>
<li><a href="javascript:void(0)" class="tablink" onclick="openCity(event, 'CSS');">CSS</a></li>
<li><a href="javascript:void(0)" class="tablink" onclick="openCity(event, 'W3.CSS');">W3.CSS</a></li>
</ul>
<div id="HTML" class="w3-container w3-border city">
<h2>HTML</h2>
<p>Hyper Text Markup Language.</p>
</div>
<div id="CSS" class="w3-container w3-border city">
<h2>CSS</h2>
<p>Cascading Style Sheets.</p>
</div>
<div id="W3.CSS" class="w3-container w3-border city">
<h2>W3.CSS</h2>
<p>Cascading Style Sheets by W3.CSS.</p>
</div>
</div>
<script>
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-blue";
}
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Vertical Tab
User can also arrange the tabs in vertical alignment by using the w3-sidenav class the code below demonstrates to creating the vertical tabs as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
.city {display:none;}
</style>
<body>
<nav class="w3-sidenav w3-light-grey w3-card-2" style="width:130px">
<div class="w3-container">
<h5>Menu</h5>
</div>
<a href="javascript:void(0)" class="tablink" onclick="openCity(event, 'HTML')">HTML</a>
<a href="javascript:void(0)" class="tablink" onclick="openCity(event, 'CSS')">CSS</a>
<a href="javascript:void(0)" class="tablink" onclick="openCity(event, 'W3.CSS')">W3.CSS</a>
</nav>
<div style="margin-left:130px">
<div class="w3-padding">Vertical Tab Example (sidenav)</div>
<div id="HTML" class="w3-container city">
<h2>HTML</h2>
<p>Hyper Text Markup Language.</p>
</div>
<div id="CSS" class="w3-container city">
<h2>CSS</h2>
<p>Cascading Style Sheets.</p>
</div>
<div id="W3.CSS" class="w3-container city">
<h2>W3.CSS</h2>
<p>Cascading Style Sheets by W3.CSS.</p>
</div>
</div>
<script>
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-blue";
}
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Animated Tab
User can use the w3-animated-classes to fade zoom or slide the tab content the code below demonstrates the Animated tabs as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
.city {display:none;}
</style>
<body>
<nav class="w3-sidenav w3-black w3-card-2" style="width:130px">
<div class="w3-container">
<h5>Menu</h5>
</div>
<a href="javascript:void(0)" class="tablink" onclick="openCity(event, 'HTML')">HTML</a>
<a href="javascript:void(0)" class="tablink" onclick="openCity(event, 'CSS')">CSS</a>
<a href="javascript:void(0)" class="tablink" onclick="openCity(event, 'W3.CSS')">W3.CSS</a>
</nav>
<div style="margin-left:130px">
<div class="w3-padding">Use any of the w3-animate-classes to fade, zoom or slide in tab content. Click on the links.</div>
<div id="HTML" class="w3-container city w3-animate-left">
<h2>HTML</h2>
<p>Hyper Text Markup Language.</p>
</div>
<div id="CSS" class="w3-container city w3-animate-opacity">
<h2>CSS</h2>
<p>Cascading Style Sheets.</p>
</div>
<div id="W3.CSS" class="w3-container city w3-animate-zoom">
<h2>W3.CSS</h2>
<p>Cascading Style Sheets by W3.CSS.</p>
</div>
</div>
<script>
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-blue";
}
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Tabs in Grid
By using the third columns layout user can also built the bottom border to the active tabs instead of background color. The code below demonstrates to get the Tabs in Grid as shown below.
[html]
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
.city {display:none;}
</style>
<body>
<div class="w3-container">
<h2>Tabs in a Grid</h2>
<div class="w3-row">
<a href="javascript:void(0)" onclick="openCity(event, 'HTML');">
<div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">HTML</div>
</a>
<a href="javascript:void(0)" onclick="openCity(event, 'CSS');">
<div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">CSS</div>
</a>
<a href="javascript:void(0)" onclick="openCity(event, 'W3.CSS');">
<div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">W3.CSS</div>
</a>
</div>
<div id="HTML" class="w3-container city w3-animate-left">
<h2>HTML</h2>
<p>Hyper Text Markup Language.</p>
</div>
<div id="CSS" class="w3-container city w3-animate-opacity">
<h2>CSS</h2>
<p>Cascading Style Sheets.</p>
</div>
<div id="W3.CSS" class="w3-container city w3-animate-zoom">
<h2>W3.CSS</h2>
<p>Cascading Style Sheets by W3.CSS.</p>
</div>
</div>
<script>
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-border-red", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.firstElementChild.className += " w3-border-red";
}
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- Active Tabs
- Vertical Tab
- Animated Tab
- Tabs in Grid
Key Points
- User can also built Tabbed Image gallary.
- In Grid Model user get the border instead of background color.
- In Tabs User can all animated effects by using Animate class.