这是一篇严肃的笔记,上代码:
//html部分
<div class="main_pro">
<ul class="tab_menu">
<li class="current">menu_1</li>
<li>menu_2</li>
<li>menu_3</li>
</ul>
<div class="tab_box">
<div>content1</div>
<div class="hide">content2</div>
<div class="hide">content3</div>
</div>
</div>
//必要的css,其他的自己调
.current{display:block;}
//js部分
//获取每个内容
var tabBox=$("div.tab_box").children("div");
$("#main_pro .tab_menu li").mouseover(function(){
var lis=$(this);
lis.siblings("li")
.removeClass("current")
.end()
.addClass("current");
tabBox.siblings("div")
.addClass("hide")
.end()
.eq(lis.index()) //根据当前li的index指取得对应的内容
.removeClass("hide");
});
就这样。