Tuesday, March 20, 2012

Simple jquery tab navigation

The code below creates very simple tabbed interface with plain HTML, CSS and jquery -

The jQuery

$('.tabsContent').hide();
$('.tabsContent:first').show();
$('.theTabs li:first').addClass('selectedTab');
$('.theTabs li a').click(function(){    
    $('.theTabs li').removeClass('selectedTab');   
    $(this).parent().addClass('selectedTab');    
   
    var currentTab = $(this).attr('href');    
    $('.tabsContent').hide();   
    $(currentTab).show();  
      
return false;

});

The HTML

<ul class="theTabs">                       
    <li><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
    <li><a href="#tab-3">Tab 3</a></li>
</ul>

<div id="tab-1" class="tabsContent">
    Tab 1
</div>
<div id="tab-2" class="tabsContent">
    Tab 2
</div>
<div id="tab-3" class="tabsContent">
    Tab 3
</div>


The CSS

.theTabs{
    font-weight: bold;
}
.theTabs li{
    float: left;
}
.theTabs li a{
    display: block;
    padding: 6px 0;
}
.tabsContent{
    display: none;
}
.selectedTab{
    background: red;
}