js+css实现个性tab选项卡切换显示特效

作者:sky 点击:46 评论:0 发布时间:周三, 04/09/2014 - 00:52 所属分类:综合实例

实用的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">  </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>  <script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script> <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>

提示：你可以先修改部分代码再运行。

顶一下

(0)

100%

踩一下

(0)

100%

标签: