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

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

作者: 雅雅的前端工作学习 | 来源:发表于2019-03-02 15:36 被阅读0次

    原理:
    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();
                }
            });
        });
    

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/tfgeuqtx.html