jQuery tabs

    [javascript]
    /* 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>
    [/javascript]

    Leave a Reply