Jquery实现的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>

CSS:

.tabs {

    float:left;

    background-image: url(themes/images/nav_bg.jpg);

    width:100%;

}

.tabs ul

{

    list-style: none outside none;

    margin:;

    padding:;

}

.tabs ul li

{

    float: left;

    line-height: 24px;

    margin:;

    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>