Jquery实现的Tabs页

阅读更多

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

纯属记录自己写的东西，先来个图

   

       
• 管理导航

       
• 系统设置

       
• 用户管理

       
• 内容管理

       
• 其他管理

   

   

    1111111
   

   

    222222222
   

   

    33333333333
   

   

    4444444444
   

   

    555555555555555
   

　　样式

?.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代码

?

简简单单，效果就达到了

//tabs插件-小色帝稍作改进
(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();
});

• 
• 大小: 9.5 KB

• 查看图片附件