jQuery选项卡插件代码很少

一年前阿牛看到别人用jQuery写的树形菜单的展开收缩、还有选项卡代码量很少很精简,当时很羡慕,但到后来慢慢了解jQuery后才知道原来jQuery如此强大,今天有些时间分享一下自己折腾的选项卡代码,原理都代码都很简单,高手可以直接路过的

开始jquery选项卡代码之前,我们先了解一下常见的选项卡html结构如下:

<div class="tabs">
	<div class="tbmenu">
		<h2>选项卡菜单一</h2>
		<h2>选项卡菜单二</h2>
	</div>
	<div class="tbcont">
		<div>选项卡内容一</div>
		<div style="display:none;">选项卡内容二</div>
	</div>
</div>

现在互联网上流行的选项卡结构不说多了90%都类似于以上结构,而这种结构不是很符合语义化的,原因很简单以上结构我们可以理解为标题1,标题2;标题1对应的内容1,标题2对应的内容2,正常的语义化选项卡结构通常类似于:

<div class="tabs">
	<div class="tabitem">
		<h2>选项卡菜单一</h2>
		<div>选项卡内容一</div>
	</div>
	<div class="tabitem">
		<h2>选项卡菜单二</h2>
		<div style="display:none;">选项卡内容二</div>
	</div>
</div>

改变结构后我们就可以理解为标题1,内容1;标题2,内容2,很明显比第一种结构好,当然事物的存在必然有他的好处或者优势,第一种的优势在于我们在写CSS样式的时候要简单方便些,本篇也以第一种结构来制作jquery选项卡,而第二种要稍显复杂,有机会阿牛会更新一篇专门制作第二种结构选项卡的文章 好了这些都是题外话,还是回到正题,现在有了html,就可以写jquery代码(应该说是写js代码) 首先在页面里加载jquery库,如:

<script src="http://static.qmtx3.com/qmtx3static/jquery1.7.2.js" type="text/javascript"></script>

当然你也可以下载到你服务器上,用本地路径,jquery代码如下

	$(function(){
		$('.tabs .tbmenu h2').click(function(){
			$(this).addClass('hover').siblings().removeClass('hover')
			.end().parent().next('.tbcont').find('div').eq($(this).index()).show().siblings().hide();
		});
	});

代码解析$('.tabs .tbmenu h2')该选择器为选择选项卡菜单的,可以修改为其他标签 hover为菜单选中样式名 完整的jquery选项卡demo代码如下

<script src="http://static.qmtx3.com/qmtx3static/jquery1.7.2.js" type="text/javascript"></script>
<style>
	.tabs .tbmenu{ overflow:hidden; *zoom:1;}
	.tabs .tbmenu h2{ padding:5px 10px; margin-right:5px; float:left; cursor:pointer; background:#f5f5f5;}
	.tabs .tbmenu .hover{ background:green; color:#fff;}
</style>
该jquery选项卡代码由窍门天下制作
<div class="tabs">
	<div class="tbmenu">
		<h2>选项卡菜单一</h2>
		<h2>选项卡菜单二</h2>
	</div>
	<div class="tbcont">
		<div>选项卡内容一</div>
		<div style="display:none;">选项卡内容二</div>
	</div>
</div>
<script type="text/javascript">
	$(function(){
		$('.tabs .tbmenu h2').click(function(){
			$(this).addClass('hover').siblings().removeClass('hover')
			.end().parent().next('.tbcont').find('div').eq($(this).index()).show().siblings().hide();
		});
	});
</script>

有时间你也可以封装一个自己的jquery插件方便日后使用

相关阅读:利用CSS3后代选择器和CSS3伪类制作的无JS的纯CSS选项卡[ie8+]