Create tab using jquery and css

Creating tab is very simple with the use of CSS and JQuery. As We know that JQuery is the most popular JavaScript Library. In this Post you can find all the stuff that you need to creating tab. Well if we talking about why we using tab, because with the use of tab we can provide more data or introduce more stuff about the website and divide that stuff in separate tabs. Each Tab contain the relative data or HTML Stuff.

AS you see in the below HTML section, that i have used li markup, which contain the tabs, Tab 1 and Tab 2. And below div with i also set two div which contain the separate tab data. Now you have to play with the CSS that gives the look of tabs to this HTML section. And you will get the CSS, just below the HTML Section.

HTML Section for Creating Tab:

<div id="container">
<div id="tab">
<ul>
<li class="active-tab"><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
</ul>
</div>
<div id="data-container">
<div id="tab1" class="active">
<p>Tab1 Content</p>
</div>
<div id="tab2">
<p>Tab2 Content</p>
</div>
</div>
</div>

CSS Section for Tab:

#container{
width: 400px;
margin: 10px auto;
}
#tab{
width: 100%;
height: 26px;
}
#tab ul{
list-style: none;
margin:0;
padding:0;
}
#tab li{
margin: 0px;
padding: 0px;
height: 26px;
float: left;
}
#tab li a{
border-left: 1px solid #333;
border-top: 1px solid #333;
border-right: 1px solid #333;
height: 26px;
line-height: 26px;
position: relative;
margin-right: 1px;
padding: 6px 10px;
border-radius: 3px 3px 0 0;
-o-border-radius: 3px 3px 0 0;
-ms-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
font-family: verdana;
font-size: 13px;
text-decoration: none;
color: #999;
}
#tab li a:hover,
#tab li.active-tab a{
background: #efefef;
z-index: 111;
color: #333;
}
#data-container{
border: 1px solid #333;
border-radius: 0 3px 3px 3px;
-o-border-radius: 0 3px 3px 3px;
-ms-border-radius: 0 3px 3px 3px;
-webkit-border-radius: 0 3px 3px 3px;
-moz-border-radius: 0 3px 3px 3px;
background: #efefef;
}
#data-container div{
display: none;
font-family: Verdana;
font-size: 13px;
padding: 0 10px;
}
#data-container div.active{
display: block;
}

After Completing all the Design Section, just paste the as it is jQuery stuff. In this Code i simple check the number of Tabs and apply click event on separate tab.

JQuery Section for Creating Tab:

$(function() {
    var id, tab = $('#tab li');

    tab.each(function(i, e) {
        $(this).click(function(eve){
            eve.preventDefault();

            id = $('a', this).attr('href');

            $('#tab li').removeClass('active-tab');
            $('#data-container div').removeClass('active');

            $(this).addClass('active-tab');
            $(id).addClass('active');
        });
    });
})