<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。以质量为核心，以实用为目的,打造一流网页特效站" />
<title>网页特效 js+css实现不规则tab选项卡特效 站长特效网</title>
<style type="text/css">
<!--
body,td{font-size: 12px;}
.tab{margin-top:100px}
#wwwzzjsnet1{width:346px;height:100px;line-height:100px;border-left:#757575 1px solid;border-bottom:#757575 1px solid;border-right:#757575 1px solid;}
#wwwzzjsnet2{width:346px;height:100px;line-height:100px;border-left:#757575 1px solid;border-bottom:#757575 1px solid;border-right:#757575 1px solid;}
#wwwzzjsnet3{width:346px;height:100px;line-height:100px;border-left:#757575 1px solid;border-bottom:#757575 1px solid;border-right:#757575 1px solid;}
.zzjs_net1{width:346px;height:27px;line-height:27px;background-image:url(/img/tab_20110118zzjs_net.jpg);cursor:pointer;}
.zzjs_net2{width:346px;height:27px;line-height:27px;background-image:url(/img/tab2_20110118zzjs_net.jpg);cursor:pointer;}
.zzjs_net3{width:346px;height:27px;line-height:27px;background-image:url(/img/tab3_20110118zzjs_net.jpg);cursor:pointer;}
.tab1{width:115px;height:27px;line-height:27px;float:left;text-align:center;cursor:pointer;}
.tab2{width:115px;height:27px;line-height:27px;float:left;text-align:center;cursor:pointer;color:#FFFFFF;}
.tab3{width:115px;height:27px;line-height:27px;float:left;text-align:center;cursor:pointer;color:#FFFFFF;}
-->
</style>
</head>
<body style="text-align:center">
<script type=text/javascript>
function settab_zzjs_net(i) {
select_zzjs_net(i);
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。
function select_zzjs_net(i) {
switch (i) {
case 1:
document.getElementById("wwwzzjsnet1").style.display = "block";
document.getElementById("wwwzzjsnet2").style.display = "none";
document.getElementById("wwwzzjsnet3").style.display = "none";
document.getElementById("zzjs_net1").style.color = "#000000";
document.getElementById("zzjs_net2").style.color = "#ffffff";
document.getElementById("zzjs_net3").style.color = "#ffffff";
break;
case 2:
document.getElementById("wwwzzjsnet1").style.display = "none";
document.getElementById("wwwzzjsnet2").style.display = "block";
document.getElementById("wwwzzjsnet3").style.display = "none";
document.getElementById("zzjs_net1").style.color = "#ffffff";
document.getElementById("zzjs_net2").style.color = "#000000";
document.getElementById("zzjs_net3").style.color = "#ffffff";
break;
case 3:
document.getElementById("wwwzzjsnet1").style.display = "none";
document.getElementById("wwwzzjsnet2").style.display = "none";
document.getElementById("wwwzzjsnet3").style.display = "block";
document.getElementById("zzjs_net1").style.color = "#ffffff";
document.getElementById("zzjs_net2").style.color = "#ffffff";
document.getElementById("zzjs_net3").style.color = "#000000";
break;
}
}//欢迎来到站z长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。
</script>
<a href="http://www.zzjs.net/">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！zzjs.net，站长js特效。<hr>
<!--欢迎来到站长特效网，我们网站收集大量高质量js特效，提供许多广告代码下载，网址：www.zzjs.net，zzjs@msn.com,用.net打造靓站-->
<div class="tab">
<div id="bg_zzjs" class="zzjs_net1">
<div id="zzjs_net1" class="tab1" onMouseOver="settab_zzjs_net(1);document.getElementById('bg_zzjs').className='zzjs_net1'">站长特效一号内容</div>
<div id="zzjs_net2" class="tab2" onMouseOver="settab_zzjs_net(2);document.getElementById('bg_zzjs').className='zzjs_net2'">站长特效二号内容</div>
<div id="zzjs_net3" class="tab3" onMouseOver="settab_zzjs_net(3);document.getElementById('bg_zzjs').className='zzjs_net3'">站长特效三号内容</div>
</div>
<div id=wwwzzjsnet1><a href="http://www.zzjs.net">站长特效一号内容</a>，站长特效网，以质量为核心，以实用为目的，打造一流网页特效站！</div>
<div id=wwwzzjsnet2 style="display:none"><a href="http://www.zzjs.net">站长特效二号内容</a>，站长特效网，以质量为核心，以实用为目的，打造一流网页特效站！</div>
<div id=wwwzzjsnet3 style="display:none"><a href="http://www.zzjs.net">站长特效三号内容</a>，站长特效网，以质量为核心，以实用为目的，打造一流网页特效站！</div>
</div>
</body>
</html>
