用jQuery，简单实现Tab菜单切换

网页技术　2013年05月04日　58559°C　我要评论

HTML代码结构

<div id="sidebar-tab">
<div id="tab-title">
<h3><span class="selected">选项一</span><span>选项二</span><span>选项三</span></h3>
</div>
<div id="tab-content">
<ul>内容一</ul>
<ul class="hide">内容二</ul>
<ul class="hide">内容三</ul>
</div>
</div>

#tab-title是标题，#tab-content是对应的内容（其中三个ul内的代码是WP Kit CN插件调用相应标题内容的）。如果你要显示4个内容，则在标题和内容分别添加一个span和ul即可！

22

jQuery控制代码：鼠标滑过切换

$('#tab-title span').mouseover(function(){
$(this).addClass("selected").siblings().removeClass();
$("#tab-content > ul").eq($('#tab-title span').index(this)).show().siblings().hide();
});

稍微陈述下控制代码的运作过程：鼠标移到一个标题（#tab-title span）时，该标题添加被选中（.selected）的效果，其他标题移除被选中的效果；同时，获取标题被选择的序号（.eq()），让内容中对应的子项（#tab-content ul）显示，其余子项隐藏。

 

jQuery控制代码：鼠标点击切换

$('#tab-title span').click(function(){
$(this).addClass("selected").siblings().removeClass();
$("#tab-content > ul").slideUp('1500').eq($('#tab-title span').index(this)).slideDown('1500');
});

更改为点击标题切换，而且内容显示方式改用slideUp/slideDown，此次是改进jQuery代码，使HTML结构的适用性更强。

评论