原理：
1 tab欄被點(diǎn)擊后觸發(fā)點(diǎn)擊事件
2 tab欄中的子項(xiàng)菜單全部移除當(dāng)前active樣式永乌，對應(yīng)的內(nèi)容項(xiàng)全部隱藏
3 tab中被點(diǎn)擊的子項(xiàng)菜單添加active樣式
4 找到菜單項(xiàng)中data-id與被點(diǎn)擊的子項(xiàng)菜單data-id相同的內(nèi)容項(xiàng)惑申，顯示出來
注意：使用了jq動(dòng)畫需要stop（true,true)來刪除之前動(dòng)畫，否則操作過快會導(dǎo)致頁面的下拉菜單不消失
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>
//內(nèi)容項(xiàng)
<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欄被點(diǎn)擊后觸發(fā)點(diǎn)擊事件
$(".tabbar_box").click(e=>{
//tab欄中的子項(xiàng)菜單全部移除當(dāng)前active樣式翅雏，對應(yīng)的內(nèi)容項(xiàng)全部隱藏
$(".tabbar_box>span").removeClass("active");
$(".result_list").hide();
//tab中被點(diǎn)擊的子項(xiàng)菜單添加active樣式
$(e.target).addClass("active");
//找到菜單項(xiàng)中data-id與被點(diǎn)擊的子項(xiàng)菜單data-id相同的內(nèi)容項(xiàng)圈驼，顯示出來
$(".result_list").each(function(){
if($(this).data('id') == $(e.target).data('id')) {
$(this).stop(true,true).slideDown();
}
});
});
