基于jquery的标签切换效果
现在很多页面都需要做标签切换效果，为了以后使用方便，写了一个通用的方法，可以快速制作标签切换效果。在这里分享，里面有注释，如果有疑问可以留言给我。例子代码如下（需要另外下载jquery文件）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>标签切换效果通用代码</title>
<style>
body{ background:#fff; margin:0; padding:0;font-size:12px; color:#333;}
.zhzhtabs dt li{padding:0;margin:0;list-style:none;float:left; cursor:pointer;}
.zhzhtabs dd{clear:both; margin:0}
.tab1off,.tab1on{width:50px;}
.tab1on{color:#f00;border:1px solid #060;}
.tab1off{color:#446674;}
.tab2off,.tab2on{width:200px;}
.tab2on{color:#FC0}
.tab2off{color:#600}
.tab1_c{ height:100px; background:#3C0}
.tab2_c{ height:30px; border:1px solid #F93; background:#FC6;}
</style>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
//在此调用方法创建效果实例 参数说明：zhzh_CreateTab(dl的ID,当前项的class,其他项的class,默认项索引,事件类型)
//ps:1,默认项索引 0开始 2，单击：click,鼠标经过：mouseover,双击：dblclick 3,（如果用得好，注意样式的通用性可以节省代码）
zhzh_CreateTab("tab1","tab1on","tab1off",0,"click");
zhzh_CreateTab("tab2","tab2on","tab2off",1,"mouseover");
zhzh_CreateTab("tab3","tab1on","tab1off",2,"click");
});
var changestat=true;
function zhzh_CreateTab(eid,onclass,offclass,defaultItem,howdo)
//标签切换效果通用代码 design by zhzh.cq.cn
//参数说明：zhzh_CreateTab(dl的ID,当前项的class,其他项的class,默认项索引)
{
$("#"+eid+" dt li").addClass(offclass).bind(howdo,function(){
if(changestat){
$("#"+eid+" dt li").removeClass(onclass).addClass(offclass);
$(this).removeClass(offclass);
$(this).addClass(onclass);
var Ctit=$.trim($(this).text());
$.each($("#"+eid+" dt li"), function(i, n){if($.trim(n.innerText)==Ctit){changestat=false;$("#"+eid+" dd>div").hide();$($("#"+eid+" dd>div")[i]).fadeIn("fast",function(){changestat=true});}});
}});
if($("#"+eid+" dt li").length>defaultItem);
{
$("#"+eid+" dt li")[defaultItem].className=onclass;
$("#"+eid+" dd>div").hide();
if($("#"+eid+" dd>div").length>defaultItem)
$("#"+eid+" dd>div")[defaultItem].style.display="";
}
}
</script>
</head>
<body>
<div style="width:500px;">
<!--这里dl必须建立设置id 定义dl外面容器的宽度，dl不定义宽度这样可以让它100%自适应-->
<dl id="tab1" class="zhzhtabs">
<dt><li>tab1</li><li>tab2</li><li>tab3</li></dt>
<dd>
<!--dd下div个数跟上面li个数一样，切换的时候会显示对应的那一个 样式可以用全局方式 也可以再在div上加class 或者加id个别设置-->
<div class="tab1_c">111</div>
<div class="tab1_c">222</div>
<div class="tab1_c">333</div>
</dd>
</dl>
</div>
<br />
<br />
<br />
<br />
<div style="width:1000px;">
<dl id="tab2" class="zhzhtabs">
<dt><li>tab1</li><li>tab2</li><li>tab3</li></dt>
<dd>
<div class="tab2_c">111</div>
<div class="tab2_c">222</div>
<div class="tab2_c">333</div>
</dd>
</dl>
</div>
<br />
<br />
<br />
<dl id="tab3" class="zhzhtabs">
<dt><li>tab1</li><li>tab2</li><li>tab3</li></dt>
<dd>
<!--dd下div个数跟上面li个数一样，切换的时候会显示对应的那一个 样式可以用全局方式 也可以再在div上加class 或者加id个别设置-->
<div>111</div>
<div>222</div>
<div>333</div>
</dd>
</dl>
<br />
<br />
<br />
<br />
</body>
</html>