基于JavaScript实现TAB标签效果

2019-11-20 10:48:53

字体：大中小

来源：转载

供稿：网友

js实现tab标签效果，在项目中经常用到，今天抽点时间把我写的js实现tab标签效果源码分享给大家，对js tab标签代码需要的朋友参考下

废话不多说了，直接给大家贴代码了：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="keywords" content="JS代码,TAB标签,JS广告代码,JS特效代码" /><meta name="description" content="此代码内容为不规则TAB选项卡效果，属于站长常用代码，更多TAB标签代码请访问武林网频道。" /><title>TAB选项卡效果</title><style type="text/css"><!--body,td{font-size: 12px;}.tab{margin-top:100px}//定义三个id#TabTab03Con1{width:346px;height:100px;line-height:100px;border-left:#757575 1px solid;border-bottom:#757575 1px solid;border-right:#757575 1px solid;}#TabTab03Con2{width:346px;height:100px;line-height:100px;border-left:#757575 1px solid;border-bottom:#757575 1px solid;border-right:#757575 1px solid;}#TabTab03Con3{width:346px;height:100px;line-height:100px;border-left:#757575 1px solid;border-bottom:#757575 1px solid;border-right:#757575 1px solid;}//定义三个标签类，放在标签头位置，以及背景图片的信息；.xixi1{width:346px;height:27px;line-height:27px;background-image:url(images/01.jpg);cursor:pointer;}.xixi2{width:346px;height:27px;line-height:27px;background-image:url(images/02.jpg);cursor:pointer;}.xixi3{width:346px;height:27px;line-height:27px;background-image:url(images/03.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 setTab03Syn ( i ){selectTab03Syn(i);}//设置在不同的标签上点击时，当前标签以及其他标签的状态；function selectTab03Syn ( i ){switch(i){case 1:document.getElementById("TabTab03Con1").style.display="block";document.getElementById("TabTab03Con2").style.display="none";document.getElementById("TabTab03Con3").style.display="none";document.getElementById("font1").style.color="#000000";document.getElementById("font2").style.color="#ffffff";document.getElementById("font3").style.color="#ffffff";break;case 2:document.getElementById("TabTab03Con1").style.display="none";document.getElementById("TabTab03Con2").style.display="block";document.getElementById("TabTab03Con3").style.display="none";document.getElementById("font1").style.color="#ffffff";document.getElementById("font2").style.color="#000000";document.getElementById("font3").style.color="#ffffff";break;case 3:document.getElementById("TabTab03Con1").style.display="none";document.getElementById("TabTab03Con2").style.display="none";document.getElementById("TabTab03Con3").style.display="block";document.getElementById("font1").style.color="#ffffff";document.getElementById("font2").style.color="#ffffff";document.getElementById("font3").style.color="#000000";break;}}</script><div class="tab"><div id="bg" class="xixi1"><div id="font1" class="tab1" onMouseDown="setTab03Syn(1);document.getElementById('bg').className='xixi1'">page1</div><div id="font2" class="tab2" onMouseDown="setTab03Syn(2);document.getElementById('bg').className='xixi2'">page2</div><div id="font3" class="tab3" onMouseDown="setTab03Syn(3);document.getElementById('bg').className='xixi3'">page3</div></div><div id=TabTab03Con1> 不规则TAB选项卡效果1</div><div id=TabTab03Con2 style="display:none">不规则TAB选项卡效果2</div><div id=TabTab03Con3 style="display:none">不规则TAB选项卡效果3</div></div></body></html>

以上代码经小编测试过了，可以放心使用，当然要根据个人项目需求，适当的增删改查，非常感谢大家对武林网网站的支持。

上一篇：学习JavaScript设计模式之代理模式

下一篇：基于JavaScript实现瀑布流布局