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

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

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

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