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