Of Stack

Based on JavaScript TAB tag effect is realized

  • 2020-11-30 08:06:13
  • OfStack

js tab tag effect, in the project is often used, today take some time to write js tab tag effect source code to share with you, js tab tag code needs friends reference

Without further ado, I will post the code directly to you: 


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS code ,TAB The label ,JS AD code ,JS The special effects of code " />
<meta name="description" content=" The content of this code is irregular TAB TAB effect, belonging to common webmaster code, more TAB Tag code please visit the Script house channel. " />
<title>TAB TAB effect </title>
<style type="text/css">
<!--
body,td{font-size: 12px;}
.tab{margin-top:100px}
// define 3 a 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;}
// define 3 A tag class, placed in the header position, and background image information; 
.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;}
//3 Four tag classes are used to initialize information such as the size and location of the tag. 
.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 TAB and other tabs when clicking on different tabs; 
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>  irregular TAB TAB effect 1</div>
<div id=TabTab03Con2 style="display:none"> irregular TAB TAB effect 2</div>
<div id=TabTab03Con3 style="display:none"> irregular TAB TAB effect 3</div>
</div>
</body>
</html>

The above code has been tested by this site, you can rest assured to use, of course, according to individual project needs, appropriate additions, deleations, changes and checks, thank you very much for the support of this site.

Related articles: