Jquery实现的Tabs

来源：互联网发布：用阿里云搭建ip代理编辑：程序博客网时间：2024/05/19 12:27

前段时间做一个项目，其中界面部分要用到的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>

0 0