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

最新推荐文章于 2022-05-05 11:03:34 发布

weixin_34234829

最新推荐文章于 2022-05-05 11:03:34 发布

阅读量201

点赞数

原文链接：http://www.cnblogs.com/Sue_/articles/2479356.html

版权

<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>

转载于:https://www.cnblogs.com/Sue_/articles/2479356.html

weixin_34234829

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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.ne...
复制链接

扫一扫