CSS and Jquery Tabs

This is Simple tutorial of CSS and Jquery Tabs you can apply these tabs anywhere into your website and customize it according to your need.

CSS

#tabs{width:500px;}
#tabs-links
{
 width:100%;
 height:40px;
}
#tabs-links a
{
 display:inline-block;
 height:40px;
 line-height:40px;
 background:#006699;
 color:#fff;
 text-decoration:none;
 padding:0px 20px;
}
#tabs-container div.tabs
{
 width:100%;
 height:300px;
 background:#eee;
 display:none;
 padding:10px;
 border:solid 1px #ccc;
}

Jquery

 $(document).ready(function(e) {
        $('#tabs-links a').click(function(){
   $tab_link_index=$(this).index()+1;
   $('#tabs-container div.tabs').css("display","none");
   $('#tabs-container div.tabs:nth-child('+$tab_link_index+')').css("display","block");
   });
    });

HTML

Tab 1 Tab 2 Tab 3 


This is Tab 1 Content

This is Tab 2 Content

This is Tab 3 Content

Download File Used in this example View Live Demo