原理:
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();
}
});
});
网友评论