var $tab = $('div.tabUnit');//$tabに、div.tabUnitを返す
var $nav = $tab.find('.tabNav a');//指定のパーツの中のクラス名nav
var $tabBody = $tab.find('.tabBody');//指定のパーツの中のクラス名tabBody

//初期の状態
$tabBody.not(':first').hide();//初めのtabBody以外は非表示にしておく
$nav.eq(0).parent().addClass('active');//初めのタブにクラス名active付与

//タブをクリックした時
$nav.click(function(){
    var $this = $(this);
    var targetTabId = $this.attr('href');//タブのリンクの値（=tabBodyのid）を取得
    
    $nav.parent().removeClass('active');//クラス名activeを取る
    $tabBody.hide();//tabBodyを非表示に
    $this.parent().addClass('active');//クリックしたタブにクラス名activeをつける
    $(targetTabId).fadeIn(1000);//取得したidのついたtabBodyを1000のスピードでフェードインさせる

    return false;
});

<div class="tabUnit">
<ul class="tabNav">
<li class="tab01"><a href="#body01">Tab1</a></li>
<li class="tab02"><a href="#body02">Tab2</a></li>
<li class="tab03"><a href="#body03">Tab3</a></li>
</ul>

<div class="tabBody" id="body01">
<ul>
<li>Tab1 Tab1 Tab1</li>
<li>Tab1 Tab1 Tab1</li>
<li>Tab1 Tab1 Tab1</li>
<li>Tab1 Tab1 Tab1</li>
<li>Tab1 Tab1 Tab1</li>
<li>Tab1 Tab1 Tab1</li>
</ul>
<!-- /.tabBody --></div>
<div class="tabBody" id="body02">
<ul>
<li>Tab2 Tab2 Tab2</li>
<li>Tab2 Tab2 Tab2</li>
<li>Tab2 Tab2 Tab2</li>
<li>Tab2 Tab2 Tab2</li>
<li>Tab2 Tab2 Tab2</li>
<li>Tab2 Tab2 Tab2</li>
<li>Tab2 Tab2 Tab2</li>
<li>Tab2 Tab2 Tab2</li>
<li>Tab2 Tab2 Tab2</li>
<li>Tab2 Tab2 Tab2</li>
</ul>
<!-- /.tabBody --></div>
<div class="tabBody" id="body03">
<ul>
<li>Tab3 Tab3 Tab3</li>
<li>Tab3 Tab3 Tab3</li>
<li>Tab3 Tab3 Tab3</li>
<li>Tab3 Tab3 Tab3</li>
<li>Tab3 Tab3 Tab3</li>
<li>Tab3 Tab3 Tab3</li>
<li>Tab3 Tab3 Tab3</li>
<li>Tab3 Tab3 Tab3</li>
<li>Tab3 Tab3 Tab3</li>
<li>Tab3 Tab3 Tab3</li>
<li>Tab3 Tab3 Tab3</li>
<li>Tab3 Tab3 Tab3</li>
<li>Tab3 Tab3 Tab3</li>
<li>Tab3 Tab3 Tab3</li>
<li>Tab3 Tab3 Tab3</li>
</ul>
<!-- /.tabBody --></div>
<!-- /.tabUnit --></div>

/**
 * Search Tab Unit
 */
 
div.tabUnit {
    margin: 0 0 20px;
}

    /**
     * Tab Nav
     */
    div.tabUnit ul.tabNav {
        margin: 0;
        border-bottom: 2px solid #666;
        zoom: 1;
    }
    div.tabUnit ul.tabNav:after {
        content: "."; display: block; clear: both; height: 0;visibility: hidden; font-size: 0;
    }
    
    div.tabUnit ul.tabNav li {
        float: left;
        display: inline;
        margin: 0 5px 0 0;
        background: no-repeat;
        border: 1px solid #666;
        border-width: 1px 1px 0;
    }
    
    div.tabUnit ul.tabNav li a {
        display: block;
        padding: 5px 20px;
        outline: none;
        color: #FFF;
        font-weight: bold;
        filter: alpha(opacity=40);
        opacity: 0.4;
    }
    
    div.tabUnit ul.tabNav li.tab01 a {background: #FF3366;}
    div.tabUnit ul.tabNav li.tab02 a {background: #6666CC;}
    div.tabUnit ul.tabNav li.tab03 a {background: #FF9900;}
    
    div.tabUnit ul.tabNav li a:hover {
        filter: alpha(opacity=100);
        opacity: 1;
    }
    
    div.tabUnit ul.tabNav li.active a ,
    div.tabUnit ul.tabNav li a:hover {
        filter: alpha(opacity=100);
        opacity: 1;
    }
    

    /**
     * Tab tabBody
     */
    div.tabUnit .tabBody {
        padding: 20px;
        border: solid #666;
        border-width: 0 1px 1px;
    }

jsFiddle