Tabs made with jQuery

Tabs made with jQuery

by Nirvanachain

HTML

<div id="wrapper">
    <div id="tabs">
        <ul>
            <li class="active">Tab 1</li>
            <li>Tab 2</li>
            <li>Tab 3</li>
        </ul>
    </div>
    <div id="desc">
        <div>Text for item 1.</div>
        <div>Text for item 2.</div>
        <div>Text for item 3.</div>
    </div>
</div>

CSS

#wrapper {padding:1em; width:500px;}
#tabs {width:100%; padding:0; margin:0;}
#tabs ul {padding:0; margin:0; width:100%;}
#tabs li {
    display:block; 
    float:left; 
    text-align:center; 
    background-color:#ccc; 
    border:1px solid #999; 
    margin:0; 
    padding:0; 
    width:32.9%;
    color:#999;
    cursor:pointer;
    text-transform:uppercase;
}
#tabs li.active {
    background-color:#efefef;
    border-bottom:1px solid #efefef;	
}
#desc {
    width:100%;	
}
#desc div {
    clear:left;
    background-color: #FFF;
    border:1px solid #999;
    width:100%;
    height:200px;	
}

JavaScript

$(document).ready(function() {
    $('#desc div:not(:first)').hide();
    $('#tabs li').click(function(event) {
        var id = $(event.target).index(); //Pass jQuery the object that you clicked on
        $('.active').removeClass('active');
        $(event.target).addClass('active');
        $('#desc div').hide().eq(id).show(); //eq: get the object at a particular point in the array
    });
    
});