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