简易Tab切换

<div class="tabbar">
    <ul class="clearfix">
        <li><a href="javascript:void(0);">标签栏1</a></li>
        <li class="on"><a href="javascript:void(0);">标签栏2</a></li>
        <li><a href="javascript:void(0);">标签栏3</a></li>
    </ul>
</div>
<div class="data-list" style="display: none">1</div>
<div class="data-list" style="display: block">2</div>
<div class="data-list" style="display: none">3</div>

<script>
    $(".tabbar ul li").click(function () {
        var t = $(this).index();
        $(".tabbar ul li").removeClass("on");
        $(this).addClass("on");
        $(".data-list").stop(true).fadeOut(0);
        $(".data-list").eq(t).stop(true).fadeIn(200);
    })
</script>

复制代码

转载于:https://juejin.im/post/5d09dd056fb9a07ea33c197b