多个tab切换demo

有多个tab切换时，可用 data-* 自定义属性写样式的切换效果

html：

<div class="wrap">
    <nav class="tab">
         <i class="navItem on" data-type="chart1">tab1</i>
         <i class="navItem " data-type="chart2">tab2</i>
         <i class="navItem " data-type="chart3">tab3</i>
         <i class="navItem " data-type="chart4">tab4</i>
         <i class="navItem " data-type="chart5">tab5</i>
    </nav>
    <div class="chart_wrap " id="chart1">
         <div class="chart_table">内容1</div>
    </div>
    <div class="chart_wrap  none" id="chart2">
         <div class="chart_table">内容2</div>
    </div>
    <div class="chart_wrap  none" id="chart3">
         <div class="chart_table">内容3</div>
    </div>
    <div class="chart_wrap none" id="chart4">
         <div class="chart_table">内容4</div>
    </div>
    <div class="chart_wrap none" id="chart5">
         <div class="chart_table">内容5</div>
    </div>
</div>

 

css：

.tab{display:-webkit-box; height:4.3rem; line-height:4.2rem; background:#fff; color:#999; font-size:1.4rem;border-bottom: 1px solid #E4E4E4;margin-bottom:3.4rem;}
.tab .navItem{display:block;-webkit-box-flex:1;height:4.2rem; line-height:4.2rem;}
.tab .navItem.on{color:pink; border-bottom:2px solid pink;}
.wrap{padding-bottom: 1.5rem;}

js：

$(function(){
    $(".tab .navItem").on("click",function(){
        var showTab=$(this).data("type");
        $(this).addClass("on");
        $(this).siblings().removeClass("on");
        $(".chart_wrap").addClass("none");
        $("#"+showTab).removeClass("none");
    });
})

效果：

 

转载于:https://www.cnblogs.com/javenlee/p/8066786.html