JS realizes tab tag effect, which is often used in projects. Today I took some time to share with you the source code for the js implementation tab tag effect I wrote. For friends who need the js tab tag code, please refer to it.
I won't say much nonsense, I will just post code to you:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS code, TAB tag, JS advertising code, JS special effect code" />
<meta name="description" content="The content of this code is an irregular TAB tab effect, which is a common code for webmasters. For more TAB tag codes, please visit my channel." />
<title>TABTab Effects</title>
<style type="text/css">
<!--
body,td{font-size: 12px;}
.tab{margin-top:100px}
//Define three ids#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;}
//Define three tag classes, place them at the label header, and information about the background image;.xixi1{width:346px;height:27px;line-height:27px;background-image:url(images/);cursor:pointer;}
.xixi2{width:346px;height:27px;line-height:27px;background-image:url(images/);cursor:pointer;}
.xixi3{width:346px;height:27px;line-height:27px;background-image:url(images/);cursor:pointer;}
//Three tag classes are used to initialize tag size and position information;.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);
}
//Set the status of the current tag and other tags when clicking on different tags;function selectTab03Syn ( i )
{
switch(i){
case 1:
("TabTab03Con1").="block";
("TabTab03Con2").="none";
("TabTab03Con3").="none";
("font1").="#000000";
("font2").="#ffffff";
("font3").="#ffffff";
break;
case 2:
("TabTab03Con1").="none";
("TabTab03Con2").="block";
("TabTab03Con3").="none";
("font1").="#ffffff";
("font2").="#000000";
("font3").="#ffffff";
break;
case 3:
("TabTab03Con1").="none";
("TabTab03Con2").="none";
("TabTab03Con3").="block";
("font1").="#ffffff";
("font2").="#ffffff";
("font3").="#000000";
break;
}
}
</script>
<div class="tab">
<div class="xixi1">
<div class="tab1" onMouseDown="setTab03Syn(1);('bg').className='xixi1'">page1</div>
<div class="tab2" onMouseDown="setTab03Syn(2);('bg').className='xixi2'">page2</div>
<div class="tab3" onMouseDown="setTab03Syn(3);('bg').className='xixi3'">page3</div>
</div>
<div id=TabTab03Con1> irregularTABTab Effects1</div>
<div id=TabTab03Con2 style="display:none">irregularTABTab Effects2</div>
<div id=TabTab03Con3 style="display:none">irregularTABTab Effects3</div>
</div>
</body>
</html>
The above code has been tested by the editor and can be used with confidence. Of course, it is necessary to add, delete, modify and check according to personal project needs. Thank you very much for your support for our website.