利用冒泡机制几行jq代码轻松完成tab栏切换功能

原理：
1 tab栏被点击后触发点击事件
2 tab栏中的子项菜单全部移除当前active样式，对应的内容项全部隐藏
3 tab中被点击的子项菜单添加active样式
4 找到菜单项中data-id与被点击的子项菜单data-id相同的内容项，显示出来
注意：使用了jq动画需要stop（true,true)来删除之前动画，否则操作过快会导致页面的下拉菜单不消失

html

//tab栏
   <div class="sticky-top tabbar_box">
        <span  class="active" data-id="0">我的借阅</span>
        <span data-id="1">历史借阅</span>
        <span data-id="2">历史超期</span>
    </div>
//内容项
    <div class="result_list" data-id="0">
       111
    </div>
    <div class="result_list" data-id="1">
     222
    </div>
    <div class="result_list" data-id="2">
     333
    </div>

js:

//tab栏被点击后触发点击事件
 $(".tabbar_box").click(e=>{
//tab栏中的子项菜单全部移除当前active样式，对应的内容项全部隐藏
        $(".tabbar_box>span").removeClass("active");
        $(".result_list").hide();
//tab中被点击的子项菜单添加active样式
        $(e.target).addClass("active");
//找到菜单项中data-id与被点击的子项菜单data-id相同的内容项，显示出来
        $(".result_list").each(function(){
            if($(this).data('id') == $(e.target).data('id')) {
                $(this).stop(true,true).slideDown();
            }
        });
    });