最新分享 » 网页技术 » 用jQuery，简单实现Tab菜单切换

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

时间：2013-5-4 作者：天空下的雨 分类： 网页技术 评论：0 浏览：57436

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结构的适用性更强。

标签: JS jquery