[javascript]Tab menu实现

原创
2016/07/29 15:57
阅读数 26

HTML

<div id="menu">
    <a>menu 1</a>
    <a>menu 1</a>
    <a>menu 1</a>
</div>
<div class="tabContentWrapper">
    <div>Tab 1</div>
    <div>Tab 2</div>
    <div>Tab 3</div>
</div>

JavaScript

    //default display
    $(".tabContentWrapper div:not(:first)").hide();
    //注册菜单的点击事件
    $("div#menu > a").each(function(index){
    $(this).click(
        function(){
           //先设置菜单current
           $("a.menu-active").removeClass("menu-active");
           $(this).addClass("menu-active");
           //再显示内容
           $(".tabWrapper > div:visible").hide();
           $(".tabWrapper div:eq(" + index + ")").fadeIn();
         }
   });

这样想要用其他事件触发调到某一具体的Tab会比较困难,所以另一种做法就是分别为每个menu-a 和 tab-div添加id。

function selectTab(current){
    $("div[id^=tab-]").hide();
    $("#tab-"+current).fadeIn();
    $("a[id^=menu-]").removeClass('menu-active');
    $("#menu"+current).addClass('menu-active');
}

这种方法在tab比较少的时候用挺方便的。这种选择trick很简洁,以前每次的都是在外层加一个div#menu,然后$("div#menu").find("a")来选择。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部