Tabs are used to show data of same context. Below we will discuss how to create Tab’s using simple HTML CSS and Javascript and then we will discuss a behavior users demanded from these Tabs and how we applied “Fragement Identifier Pattern” a frontend design pattern to modify the functionality. You can skip the code if you are just interested in understanding the design pattern.
Here in the Code we are trying to create Tabs for describing a Car.
*******************************CODE***********************************
HTML
<div id=’tabs‘>
<!— Tabs —>
<ul>
<li class=’inactiveTab‘ id=’OverviewTab‘ >
<a href=’#Overview‘ >Overview</a> Overview Tab
</li>
<li class=’activeTab‘ id=’SpecificationTab‘ >
<a href=’#Specification‘>Specification</a> Specification Tab
</li>
<li class=’inactiveTab‘ id=’FeaturesTab‘ >
<a href=’#Features‘>Features</a> Features Tab
</li>
<li class=’inactiveTab‘ id=’ColorsTab‘ > Colors Tab
<a href=’#Colors‘ > Colors </a>
</li>
</ul>
<!—Tab Content–>
<div id=’Overview‘ class=’inactive‘ > Overview of the Car XXXXX </div>
<div id=’Specification‘ class=’active‘ > Basic Specification XXXX </div>
<div id=’Features‘ class=’inactive‘ > Features XXX </div>
<div id=’Colors‘ class=’inactive‘ > Colors XXXXX </div>
</div>
CSS
#tabs ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#tabs ul li {
position: relative;
display: inline;
margin: 0px;
z-index: 2;
}
div.inactive {
display: none;
width: 300px;
padding: 0px;
background-color: white;
}
div.active {
border: 1px solid black;
width: 300px;
padding: 0px;
background-color: white;
margin-top: -1px;
}
li.activeTab
{
border-bottom: none;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
background-color: white;
margin-bottom: 1px;
z-index: 1;
}
li.inactiveTab
{
border-bottom:1px solid black;
line-height:2px;
border-top: 1px solid black;
border-left:1px solid black;
border-right:1px solid black;
background-color:#cccccc;
top:-1px;
}
Now we will add a little jQuery to be able to switch between tabs.
jQuery(document).ready(function(){ // document load function
jQuery(“#tabs ul li”).click(function(){ // registering the tab click event
$(this).addClass(“activeTab”); //making this tab active
$(this).removeClass(“inactiveTab”);
$(this).siblings().addClass(“inactiveTab”); //making all other tabs inactive
$(this).siblings().removeClass(“activeTab”);
$(‘#’+$(this).html()).addClass(“active”); //making container active
$(‘#’+$(this).html()).removeClass(“inactive”);
$(‘#’+$(this).html()).siblings().addClass(“inactive”); //making other container inactive
$(‘#’+$(this).html()).siblings().addClass(“active”);
});
});
************************************************************************
Read More for Enhanced Tab and Fragement Identifier Pattern
Read More for Enhanced Tab and Fragement Identifier Pattern
User wanted to share Tab Links with other users so in case if he wants somebody to read the specifications or show somebody the colors available he could send him a link and the person with the link lands on the specification or color tab.
The Fragement Identifier pattern uses Hash that can be appended to a link.The hash is then read by the client script and based on what is in the Fragement corresponding Tab is shown.
So If the URL is like
http://www.example.com/tabs.html#Colors
the hash value colors will be captured by the client script and corresponding Tab will be shown.
jQuery(document).ready(function(){ // document load function
var currentTab = window.location.hash; // reading the Fragment
currentTab = currentTab +”Tab”;
if(currentTab) // Based on the Fragment activate the Tab
{
jQuery(currentTab).addClass(“activeTab”);
jQuery(currentTab).removeClass(“inactiveTab”);
$(currentTab).siblings().addClass(“inactiveTab”);
$(currentTab).siblings().removeClass(“activeTab”);
$(‘#’+$(currentTab).html()).addClass(“active”);
$(‘#’+$(currentTab).html()).removeClass(“inactive”);
$(‘#’+$(currentTab).html()).siblings().addClass(“inactive”);
$(‘#’+$(currentTab).html()).siblings().addClass(“active”);
}
jQuery(“#tabs ul li”).click(function(){ // registering the tab click event
$(this).addClass(“activeTab”); //making this tab active
$(this).removeClass(“inactiveTab”);
$(this).siblings().addClass(“inactiveTab”); //making all other tabs inactive
$(this).siblings().removeClass(“activeTab”);
$(‘#’+$(this).html()).addClass(“active”); //making container active
$(‘#’+$(this).html()).removeClass(“inactive”);
$(‘#’+$(this).html()).siblings().addClass(“inactive”); //other container inactive
$(‘#’+$(this).html()).siblings().addClass(“active”);
});
});
How to Create Tabs and Make a Tab link shareable