jQuery tab选项卡案例（及其封装）

html +CSS

            <ul class="index3-title">
                <div class="isShow">A</div>
                <div class="">B</div>
            </ul>
            <div class="index3-body">
                <ul class="zhen-item-content animated fadeInDown" style="display: block;">
                  A
                </ul>
                <ul class="zhen-item-content animated fadeInDown" style="display: none;">
                  B
                </ul>
                
       

CSS

   .index3-title {
            background: white;
            background: white;
            padding: 0 50px!important;
            display: flex;
            border-bottom: 1px solid #eee;
        }
        
        .index3-title {
            display: flex;
            padding: 0 100px;
            border-bottom: 1px solid #eee;
        }
        
        .index3-title div {
            flex: 1;
            text-align: center;
            font-size: 15px;
            line-height: 40px;
        }
        
        .index3-title div.isShow {
            border-bottom-color: rgba(35, 58, 110, 1);
            border-bottom: 2px solid;
            color: rgb(35, 58, 110);
        }
        
        .index3-body {
            background: white;
            padding: 10px;
            border: 0 7;
            border-radius: 0 0 12px 12px;
        }
        
        .index3-body ul {
            display: none;
        }
        
        .index3-body ul:nth-child(1) {}
    

01-普通的jQuery选项卡

$(function(){
   $(".index3-title div").click(function(){
     $(".index3-title div").removeClass("isShow");
     $(this).addClass("isShow");
     $(".index3-body ul").hide();
     $(".index3-body ul").eq($(".index3-title div").index(this)).show();
})
})

02-选项卡封装

 tabs(".index3-title", "isShow", "index3-body")

        function tabs(tabMenu, isTitle, tabCont) {
            $(tabCont).each(function() {
                $(this).children().eq(0).show();
            });
            $(tabMenu).each(function() {
                $(this).children().eq(0).addClass('isShow');
            });
            $(tabMenu).children().click(function() {
                $(this).addClass(isTitle).siblings().removeClass(isTitle);
                var index = $(tabMenu).children().index(this);
                $(tabCont).children().eq(index).show().siblings().hide()
            })
        }