jquery 实现的一个简单tab 很实用。。-优快云博客

本文介绍了一个简单的Tab组件实现方案，通过绑定单击事件切换不同的Tab页面，并支持自定义响应函数。该组件仅需少量代码即可完成，适用于快速开发场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近因项目需要做了一个简易的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样式根据自己的需要修改即可
代码粗糙，渴望高手们大大的批评，来者不拒。。。