js+css实现不规则tab选项卡特效

<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 >
<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 >
  <div >站长特效一号内容</div>
  <div >站长特效二号内容</div>
  <div >站长特效三号内容</div>
 </div>
    <div http://www.zzjs.net">站长特效一号内容</a>,站长特效网,以质量为核心,以实用为目的,打造一流网页特效站!</div>
 <div http://www.zzjs.net">站长特效二号内容</a>,站长特效网,以质量为核心,以实用为目的,打造一流网页特效站!</div>
    <div http://www.zzjs.net">站长特效三号内容</a>,站长特效网,以质量为核心,以实用为目的,打造一流网页特效站!</div>
</div>
</body>
</html>