Jquery实现的Tabs页签

  • 管理导航
  • 系统设置
  • 用户管理
  • 内容管理
  • 其他管理
1111111
222222222
33333333333
4444444444
555555555555555

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    .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;
}

    </style>
    <script type="text/javascript" src="jquery-1.10.2.js"></script>
    <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>
</head>
<body>
<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>
</body>
</html>

 

 

posted @ 2013-12-06 09:07  新娃互联  阅读(342)  评论(0)  编辑  收藏  举报