Öncelikle HTML kodlarımız ile başlıyoruz:

<div id="container">
    <div id="tab-head">
        <ul>
            <li><a href="#tab1">Tab 1</a></li>
            <li><a href="#tab2">Tab 2</a></li>
            <li><a href="#tab3">Tab 3</a></li>
        </ul>
    </div>
    <div style="clear:both;"></div>
    <div id="tab-content">
        <div id="tab1" class="content">Tab 1</div>
        <div id="tab2" class="content">Tab 2</div>
        <div id="tab3" class="content">Tab 3</div>
    </div>
</div>

Daha sonra bunlara CSS yardımı ile stil veriyoruz:

#container { width: 500px; margin: 0 auto;}
ul { list-style-type: none; margin:0; padding:0; }
ul li { float:left; background: #e5e5e5; padding: 3px 8px 3px 8px; margin-right: 3px; }
ul li a { text-decoration: none; color: #333; }
.active {background:#ccc;}
#tab-content { width: 500px; }
#tab-content .content { height: 200px; background: #ccc; display: none; padding:4px;  }

Ve son olarak jQuery kodlarımız:

$(document).ready(function(){
    $('#tab-head ul li:first').addClass('active');
    $('.content:first').show();
    
    $('#tab-head ul li a').click(function(){
        var id = $(this).attr('href');
        $('#tab-head ul li').removeClass('active');
        $(this).parent().addClass('active');
        $('.content').hide();
        $(id).fadeIn();
    });
});

jQuery kodlarının açıklamaları:

 $('#tab-head ul li:first').addClass('active');

Listeleme elemanlarının birincisine (Tab1) "active" class'ını ekliyoruz.

$('.content:first').show();

"content" class'ına sahip olan birinci div'i show() ile gösteriyoruz.

$('#tab-head ul li a').click(function(){

Linklerden birine tıklandığında..

var id = $(this).attr('href');

Tıklanan link'in href değerini id değişkenine atıyoruz.

 $('#tab-head ul li').removeClass('active');

Bütün elemanların active class'ını siliyoruz.

$(this).parent().addClass('active');

parent() ile bir önceki seçiciye "active" cass'ını ekliyoruz.

$('.content').hide();

"content" classlı bütün div'leri saklıyoruz.

$(id).fadeIn();

aldığımız href değerini içeren content'i fadeIn() animasyonu ile gösteriyoruz.