jQuery tabs

/* TABS */
$('.tab_nav li:first').addClass('active').show();
    $('.content').hide();
    $('.content:first').show();

    $('.tab_nav li').click(function(){

        $('.tab_nav li').removeClass('active');

        $(this).addClass('active');
        $(".content").hide();

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
        $(activeTab).fadeIn(1000); //Fade in the active ID content
        return false;

    });

//HTML

<!-- TAB SECTION  -->
<div id="tabs">

    <ul class="tab_nav">
        <li><a href="#tab1">tab 1</a></li>
        <li><a href="#tab2">tab 2</a></li>
    </ul>

    <div class="tab_content">

        <div id="tab1" class="content"></div>

        <div id="tab2" class="content"></div>

    </div>

</div>

Leave a Reply