Tabs are a great way to organize related information into a space on your webpage. They offer a familiar user interface to the user, where they can quickly find the information they are seeking.
There are many way to implement tabs on your site. Here is my way:
HTML
[html]<div class="tab-wrapper"><ul class="tab-title">
<li class="tab1 active"><span>Features</span></li>
<li class="tab2"><span>Specifications</span></li>
<li class="tab3"><span>Related</span></li>
</ul>
<div class="tab-container">
<div class="tab1 active">Feature Content</div>
<div class="tab2">Specification Content</div>
<div class="tab3">Releated Content</div>
</div>
</div>[/html]
The few key things to the HTML is to keep your tabs (the actual tabs) grouped in their own div, and keep the content grouped in a separate div. As you can see, the class name for each tab name(in <li>) corresponds to the class name of the div which has the content. So you can name the classes whatever you like, but it needs have both an li (for the tab/title) and a div (for the content), and can only have that class name in it and/or ‘active‘ which you will find out in the jQuery. I keep everything housed in the ‘tab-wrapper’ for some isolation. Also make the first tab active, so that something is selected on page load.
CSS
[css]<style>.tab-wrapper { display:block; position: relative;}
.tab-wrapper ul.tab-title { clear:both; width: 100%; }
.tab-wrapper ul.tab-title li { float:left; display: block; text-align: center; cursor: pointer; background: #333; color:#CCC; }
.tab-wrapper ul.tab-title li.active { background: #CCC; color:#333; }
.tab-wrapper ul.tab-title li:hover { background: #CCC; color:#333; }
.tab-wrapper ul.tab-title li span { }
.tab-wrapper .tab-container { clear:both; float:left; width: 100%; }
.tab-wrapper .tab-container > div { display:none; border: 1px solid #111; }
.tab-wrapper .tab-container > div.active { display:block; }
</style>[/css]
These are all the styles you should be worried about, style as you please, the most important is to make sure ‘.tab-container > div‘ is ‘display:none‘, which will hide all the child divs in the container, and that ‘.tab-container > div.active‘ is ‘display:block‘ so it will display the active tab.
Javascript
[javascript]<script>$(document).ready(function(){
$(‘.tab-wrapper ul li’).click( function() {
$(‘.tab-wrapper ul li’).removeClass(‘active’);
$(‘.tab-wrapper .tab-container div’).removeClass(‘active’);
var className = $(this).attr(‘class’);
$(this).addClass(‘active’);
$(‘.tab-wrapper .tab-container’).find(‘div.’+className).addClass(‘active’);
});
});
</script>[/javascript]
So what we are doing is managing the class ‘.active‘, which determines what is being displayed. We do this on the ‘click‘ event for the tab titles. The first step is to remove the ‘active‘ class from the tab titles and the tab content containers, this is so we can isolate the class name, which matches the content. Store the class name of the ‘<li>‘ that was clicked, and use it to find and add the ‘active‘ class to the content container.
