jQuery封装的选项卡方法

********************************************************2018/3/15更新*********************************************************

       $('.left_sub p').on('click', function () {
               var name = $(this).attr('name');
               $('.left_sub p').removeClass('active');
               $(this).addClass('active');
               $('.p_config').removeClass('active');
               $('.' + name).addClass('active');
           });

下面封装的方法属于原创如需转载请注明出处 http://www.cnblogs.com/supershare/p/6687813.html

PS：方法中主要是采取了ul li结构，封装成方法以后可以在很多地方复用，希望对大家有所帮助

HTML部分

<div class="tab-container">
    <div class="tab-navi">
        <ul>
            <li>N1</li>
            <li>N2</li>
        </ul>
    </div>
    <div class="tab-body">
        <ul>
            <li>
                <div class="tab-container">
                    <div class="tab-navi">
                        <ul>
                            <li>N1-1</li>
                            <li>N2-2</li>
                        </ul>
                    </div>
                    <div class="tab-body">
                        <ul>
                            <li>内容1-1</li>
                            <li>内容2-2</li>
                        </ul>
                    </div>
                </div>
            </li>
            <li>内容2</li>         </ul>       </div></div>
CSS部分来了
CSS部分CSS部分

.tab-navi>ul{
    border:1px solid black;
    margin: 0;
    padding: 0;
}
.tab-navi li{
    display: inline-block;
    background-color: grey;
    cursor: pointer;
}
li.active
{
    color: red;
}

.tab-body>ul{
    border:1px solid black;
    margin: 0;
    padding: 0;
}

重点的封装方法的部分

(function ($) {
    $.fn.myTab = function () {
        //这里的this 指的是 jquery的一个数组 谁调用就是谁
        return this.each(function(){
            var $navLis = $(this).find(">.tab-navi>ul>li");//获取导航菜单的li数组
            var $conLis = $(this).find(">.tab-body>ul>li");
            //初始化 下面这三行可以封装成一个方法
            $navLis.eq(0).addClass("active");
            $conLis.hide();
            $conLis.eq(0).show();

            $navLis.on('click',function(){
                $navLis.removeClass('active');
                $(this).addClass('active');
                var ind=$(this).index();
                $conLis.hide();
                $conLis.eq(ind).show();
            });
        });
    }
})(jQuery);

PS 重点部分来了（记得在使用的时候在页面中添加下面引用方法哦）

$(function(){
    $(".tab-container").myTab()
});

巴特西

jQuery封装的选项卡方法

最新文章

热门文章