jquery实现的Tabs切换

界面部分要用到的tabs页签网上已经有很多很多现成的可以用，也用了下jquery-ui里面的tabs，感觉大了点，自己的需求并不复杂，还是自己动手写写吧，目的为了让html更干净点。

实现的效果如下图：

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">
    http://yige.org 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;
}

$(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(); //显示选中项对应内容
        });
 
    });

后来，封装了下，大家也看看吧：

//tabs插件-jackin稍作改进
(function ($) {
    $.fn.extend({
        qmTabs: function () {
            var aTabBodys = $('#tabs-body > div');
            $(this).children("li").each(function (index) {
                $(this).click(function () {
                    $(this).removeClass().addClass('tab-nav-action').siblings().removeClass().addClass('tab-nav');
                    aTabBodys.hide().eq(index).show();
                });
            });
        }
    });
})(jQuery);

$(document).ready(function () {
$("#tabs").qmTabs();
});

相关文章

• jQuery实现号码抽奖 2012/06/29
• jQuery基础小记录 2012/06/28
• jQuery实现图片等比缩放以及预加载 2012/06/28
• jquery禁用右键/文本选择功能/复制按键 2012/06/19
• jquery中$().hover(func1, funct2)的用法 2012/06/14
• jQuery操作select相关方法 2012/06/13
• jQuery动态添加file的方法 2012/06/13
• jQuery常用函数及功能 2012/06/11
• jQuery操作checkbox相关方法 2012/06/11
• jQuery操作radio相关方法 2012/06/08