diy Tabs Style

最新推荐文章于 2025-07-10 15:49:12 发布

转载最新推荐文章于 2025-07-10 15:49:12 发布 · 896 阅读

收录于

JavaScript

JQUERY

本文介绍了一个简单的Tabs插件实现方法，通过jQuery操作DOM元素来完成不同内容面板间的切换。该插件支持自定义样式，并提供了简洁的初始化方式。

    <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(https://blog.csdn.net/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(https://blog.csdn.net/themes/images/manage_r2_c14.jpg) no-repeat; 
         cursor:pointer; 
    } 
    .tab-nav-action{ 
        background: url(https://blog.csdn.net/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> 

简简单单，效果就达到了 
//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(); 
    });