css代碼：

.nav li{float:left;display: block;padding: 20px;}
#tab{overflow:hidden;zoom:1;}
#tab li{float:left;display: block;padding: 20px;}
#tab li.cur{background:#ccc;}
#content{padding: 20px;background: #eee;}
#content ul{display: none;}

html代碼：

<!-- nav導(dǎo)航 -->
<div class="nav">
    <ul id="nav-a">
        <li><a href="#tab-01">nav01</a></li>
        <li><a href="#tab-02">nav02</a></li>
        <li><a href="#tab-03">nav03</a></li>
    </ul>
</div>

<!-- tab標(biāo)簽 -->
<div>
    <ul id="tab">
        <li class="cur"><a href="#tab-01">01</a></li>
        <li><a href="#tab-02">02</a></li>
        <li><a href="#tab-03">03</a></li>
    </ul>
    <div id="content">
        <ul style="display:block;">
           <a href="#">01</a>
        </ul>
        <ul>
            <a href="#">02</a>
        </ul>
        <ul>
           <a href="#">03</a>
        </ul>
    </div>
</div>

js代碼：

$(function(){
    var str = window.location.hash;  //獲取當(dāng)前頁面的url地址的錨部分（從#號開始的部分）
    var idx = str.charAt(str.length - 1);  //獲取最后一個字符
    $("#tab li").eq(idx-1).trigger("click");  //tab標(biāo)簽里相應(yīng)位置出發(fā)點擊事件
});
//點擊tab標(biāo)簽
$("#tab li").click(function(){
    $(this).addClass("cur").siblings().removeClass();
    $("#content ul").eq($(this).index()).fadeIn(100).siblings().fadeOut(100);
});
//點擊nav導(dǎo)航
$("#nav-a a").click(function(){
    var str = this.hash;
    var idx = str.charAt(str.length - 1);
    $("#tab li").eq(idx-1).trigger("click");
});

…………END…………

謝謝支持，喜歡就點個?