FrontendWalla

Solutions for Real World Frontend Problems.

How to Create Tabs and Make a Tab link shareable

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


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

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top