jquery 实现的一个简单tab 很实用。。

最近因项目需要做了一个简易的tab，只有几行代码但是很实用。
这个组件简单易用，采用在页面加载的时候绑定tab列表的单击事件实现。tab列表和对应显示内容全部用div包裹，tab列表标明type=tab，显示项标明type=tabDiv,如需要有响应函数只需要在tab中添加属性func='functionname'就可以了。代码如下：

function tab(){
//说明：tab属性：type:tab指定此div为tab列表；tabDiv指定tab页面的id;func指定当此tab被激活时的相应函数
//		  tab页面属性：type:tabDiv指定此div为tab页面
	$("div[type='tab']").click(function() { 
		//绑定激发事件
		var func = eval($(this).attr("func"));
		if($(this).attr("class")=="friendTabSimple"){
			if(jQuery.isFunction(func)){
				func();
                            //如果只希望函数加载一次，如Ajax请求，去掉下面一行代码的注释即可
			//	$(this).attr("func","")
			}
		}
		
		$("div[type='tab']").removeClass("friendTabSelected");
		$(this).addClass("friendTabSelected");
		$("div[type='tabDiv']").hide();
		$('#'+$(this).attr("tabDiv")).show();
		
	});
}

html的组织形式：

<div id="friendTab">
<div tabDiv="friendTab1" type="tab" class="friendTabSelected friendTabSimple" >tab1</div>
<div tabDiv="friendTab2" type="tab" class="friendTabSimple" func="tab2Click" >tab2</div>
</div>

<div id="friendTab1" type="tabDiv" style="display:block; background-color:#FFFFFF;width:668px" >
<div id="friendInfo">tab1 content</div>
</div>
<div id="friendTab2" type="tabDiv" style="display:none; background-color:#FFFFFF;width:668px" >
<div style="float:left; width:668px;padding-left:20px">tab2 content</div>
</div>

使用时：

$(document).ready(function() {	
		tab();
	})

css样式根据自己的需要修改即可
代码粗糙，渴望高手们大大的批评，来者不拒。。。

评论

4 楼 willin2004 2009-06-17  

attribute不会影响结构的，可以根据需要自定义扩展

3 楼 嗰個人 2009-06-16  

tabDiv，type都不是原有的屬性，那麽寫，對結構沒關系吧。

2 楼 willin2004 2009-06-16  

我自定义的一个属性tabDiv='friendDiv1'，指定当点击这个tab选项卡的时候所显示的层的id。换句话说就是点击这个选项卡会显示id=friendDiv1的层

1 楼 嗰個人 2009-06-16  

<div tabDiv="friendTab1" .....

新手不懂，tabDiv="friendTab1" 請問，這個是什麽？