[javascript]Tab menu实现

最新推荐文章于 2023-07-24 10:50:41 发布

weixin_34252090

最新推荐文章于 2023-07-24 10:50:41 发布

阅读量332

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/sikou/blog/720292

版权

为什么80%的码农都做不了架构师？>>>

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")来选择。

转载于:https://my.oschina.net/sikou/blog/720292