Basic Tab - JQuery

HTML

<div id="tab-outer">
    <ul id="tab-wrapper">
        <li><a href="#tab1">Tab 1</a>

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

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

        </li>
        <li><a href="#tab4">Tab 4</a>

        </li>
    </ul>
    <div id="tab-body">
        <div id="tab1">
             <h2>Tab 1</h2>This, is the stuff in tab 1</div>
        <div id="tab2">
             <h2>Tab 2</h2>Tab 2 also has usefull things</div>
        <div id="tab3">
             <h2>Tab 3</h2>Tab 3 is just kinda here</div>
        <div id="tab4">
             <h2>Tab 4</h2>This is the last tab because we save the best for last</div>
    </div>
</div>

CSS

#tab-outer {
    position:relative;
    font:normal 12px Arial, Sans-Serif;
}
#tab-outer * {
    margin:0px 0px;
    padding:0px 0px;
}
#tab-wrapper {
    list-style:none;
    height:30px;
}
#tab-wrapper li {
    margin:0px 0px 0px 2px;
    float:left;
    font-weight:bold;
    border-top: solid 1px #12363f;

}
#tab-wrapper li a {
    display:block;
    padding:0px 15px;
    line-height:30px;
    text-decoration:none;
    color:#054687;
    background-color:#b8d6d5;
}
#tab-wrapper li.active a {
    color: white;
    background-color:#12363f;
}
#tab-body > div {
    background-color:#12363f;
    color:white;
    border: solid 2px #b8d6d5;
    padding:10px 15px;
    height:200px;
    /* Contoh */
}

JavaScript

$('#tab-wrapper li:first').addClass('active');
$('#tab-body > div').hide();
$('#tab-body > div:first').show();
$('#tab-wrapper a').click(function () {
    $('#tab-wrapper li').removeClass('active');
    $(this).parent().addClass('active');
    var activeTab = $(this).attr('href');
    $('#tab-body > div:visible').hide();
    $(activeTab).show();
    return false;
});