Tabs

by Nikhil krishnan

HTML

<div class="tab">
    <ul>
        <li> <a class="active" href="#tab1">Tab 1</a>

        </li>
        <li> <a href="#tab2">Tab 2</a>

        </li>
        <li> <a href="#tab3">Tab 3</a>

        </li>
    </ul>
    <div class="tab_container_wrpr">
        <div id="tab1" class="tab_container">
             <h1>Tab 1</h1>

            <p>Its all set. We have a beautiful interface for tab. Now its time to make it work.</p>
            <p>Ok we have done it. Now lets fire the click event & switch the content divs. to do this look at the script below:</p>
            <p>Above, ul li has hyperlinks with #tab1, #tab2 and #tab3. These will be used to determine which tab content to show. In tabDetails divs I have used those hyperlinks as id. Make sure that you put the related id as its button hyperlink has.</p>
        </div>
        <div id="tab2" class="tab_container">
             <h1>Tab 2</h1>

            <p>Its all set. We have a beautiful interface for tab. Now its time to make it work.</p>
            <p>Ok we have done it. Now lets fire the click event & switch the content divs. to do this look at the script below:</p>
            <p>Above, ul li has hyperlinks with #tab1, #tab2 and #tab3. These will be used to determine which tab content to show. In tabDetails divs I have used those hyperlinks as id. Make sure that you put the related id as its button hyperlink has.</p>
        </div>
        <div id="tab3" class="tab_container">
             <h1>Tab 3</h1>

            <p>Its all set. We have a beautiful interface for tab. Now its time to make it work.</p>
            <p>Ok we have done it. Now lets fire the click event & switch the content divs. to do this look at the script below:</p>
            <p>Above, ul li has hyperlinks with #tab1, #tab2 and #tab3. These will be used to determine which tab content to show. In tabDetails divs I have used those hyperlinks as id. Make sure that you put the related id as its button hyperlink has.</p>
        </div>
   ...

CSS

.tab{    
    width:500px;
    background:#eee;
    padding:10px;
    margin:auto;
}
.tab ul {
    display:inline-block;
    margin:10px 0 0;
    padding:0;
}
.tab ul li {
    display:inline-block;
    float:left;
    list-style:none;
}
.tab ul li a{
    color:#333;
    padding:10px 15px;
    background:#ccc;
    text-decoration:none;
}
.tab ul li a.active{
    background:#fff;
}
.tab_container {
    clear:left;
}
.tab_container_wrpr{
    background:#fff;
    padding:10px;
    margin-top:-1px;
    display:inline-block;
}

JavaScript

//custom tab

/*$(".tab_container").hide();
$('.tab_container:first').show();
$('.tab ul li a').click(function () {
    var tab = $(this).attr("href");
    $('.tab ul li a').removeClass('active');
    $(".tab_container").hide();
    $(this).addClass('active');
    $(tab).fadeIn();
    return false;
});*/

var currentTab = $('.tab ul li a:first').attr("href");

    $(".tab_container").hide();
    $('.tab_container:first').show();
    $('.tab ul li a').click(function () {
        var tab = $(this).attr("href");
        $('.tab ul li a').removeClass('active');
        $(".tab_container").hide();
        $(this).addClass('active');
        if(currentTab==$(this).attr("href"))
        {
            $(tab).show();
        }
        else
        {
             $(tab).fadeIn();
            currentTab=$(this).attr("href");
        }
        return false;
    });