这个方法的优势是无论你有多少切换标签，您只需要给切换标签和对应显示的内容加上ID号就OK。
所占资源很少。
拷贝可以看到效果，修改.current样式修改成您要的当前效果
<!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=utf-8" />
<title>tab切换 +++++ by:WebStarting</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
var oldId = 1;//前一个ID号
function showTab(num){
if(num!=oldId){//判断点击不是同一个
$("#tab_menu_"+num).addClass("current");//给点击按钮加入当前效果
$("#tab_con_"+num).show();//对应的内容显示出来
$("#tab_menu_"+oldId).removeClass("current");//去掉上一个点击按钮的当前效果
$("#tab_con_"+oldId).hide();//隐藏上一块内容
oldId=num;//把现在的ID赋给oldId;
}
}
//更改.current样式，改成你想要的当前效果
</script>
<style type="text/css">
.current {
color:#f00;
}
</style>
</head>
<body>
<div><a id="tab_menu_1" href="javascript:void(0)" class="current" _disibledevent=>
<div><a id="tab_menu_2" href="javascript:void(0)" _disibledevent=>
<div><a id="tab_menu_3" href="javascript:void(0)" _disibledevent=>
<div id="tab_con_1">第一块内容</div>
<div id="tab_con_2" style="display:none">第二块内容</div>
<div id="tab_con_3" style="display:none">第三块内容</div>
</body>
</html>
最新评论