Jquery實現的Tabs頁簽

前段時間做一個項目，其中界面部分要用到的tabs頁簽網上已經有很多很多現成的可以用，也用了下jquery-ui里面的tabs，感覺大了點，自己的需求並不復雜，還是自己動手寫寫吧，目的為了讓html更干凈點。

純屬記錄自己寫的東西，先來個圖

    <div class="tabs">
        <ul id="tabs">
            <li class="tab-nav">管理導航</li>
            <li class="tab-nav-action">系統設置</li>
            <li class="tab-nav">用戶管理</li>
            <li class="tab-nav">內容管理</li>
            <li class="tab-nav">其他管理</li>
        </ul>
    </div>
    <div id="tabs-body" class="tabs-body">
        <div style="display:block">
        1111111
        </div>
        <div style="display:none">
        222222222
        </div>
        <div style="display:none">
        33333333333
        </div>
        <div style="display:none">
        4444444444
        </div>
        <div style="display:none">
        555555555555555
        </div>
    </div>

　　樣式

.tabs {
	float:left;
	background-image: url(themes/images/nav_bg.jpg);
    width:100%;
}
.tabs ul 
{
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
.tabs ul li
{
    float: left;
    line-height: 24px;
    margin: 0;
    padding: 2px 20px 0 15px;
}
.tab-nav{
	 background: url(themes/images/manage_r2_c14.jpg) no-repeat;
	 cursor:pointer;
}
.tab-nav-action{
	background: url(themes/images/manage_r2_c13.jpg) no-repeat;
	cursor:pointer;
}
.tabs-body
{
    border-bottom: 1px solid #B4C9C6;
    border-left: 1px solid #B4C9C6;
    border-right: 1px solid #B4C9C6;
    float: left;
    padding: 5px 0 0;
    width: 100%;
}
.tabs-body div 
{
    padding:10px;
}

　　jquery代碼

    <script type="text/javascript">
        $(document).ready(function () {
            $("#tabs li").bind("click", function () {
                var index = $(this).index();
                var divs = $("#tabs-body > div");
                $(this).parent().children("li").attr("class", "tab-nav");//將所有選項置為未選中
                $(this).attr("class", "tab-nav-action"); //設置當前選中項為選中樣式
                divs.hide();//隱藏所有選中項內容
                divs.eq(index).show(); //顯示選中項對應內容
            });

        });
    </script>

　　簡簡單單，html也很干凈，效果達到了。

http://www.cnblogs.com/sicket/archive/2012/07/01/2572345.html