This example for you to share the original JS Implementation tab TAB switch effect code, for everyone's reference, the specific content as follows
1.html part
<body>
<div id= "tab" >
<div class= "Tab_menu" >
<ul>
<li class= "selected" ><a href= "#" > Current affairs </a></li>
<li><a href= "#" > Sports </a></li>
<li ><a href= "#" > Entertainment </a></li>
</ul>
</div>
<div class= "Tab_box" >
<div> Current Affairs </div>
<div class= "Hide" > Sports </div>
<div class= "Hide" > Entertainment </ div>
</div>
</div>
</body>
2.CSS part: The style part realizes the method to be various, this is I writes the simple demo, I most is not good at the CSS ><
. Tab_menu. Selected{background-color: #aaa;}
. Tab_menu ul{height:30px}
. Tab_menu ul Li{float:left;list-style:none;width:50px;height:30px;color: #000 border:solid 1px gray;border-bottom: None TEXT-ALIGN:CENTER;LINE-HEIGHT:30PX;MARGIN-RIGHT:3PX}
. Tab_menu ul Li A{text-decoration:none;
Tab_box{width:170px;height:150px;border:solid 1px Gray;
Tab_box. Hide{display:none;}
3. The important JS part:
Window.onload=function () {
var otab=document.getelementbyid (' tab ');
var ali=otab.getelementsbytagname (' Li ');
var otabbox=otab.getelementsbytagname (' div ') [1];
var abox=otabbox.getelementsbytagname (' div ');
for (Var i=0;i<ali.length;i++) {
ali[i].index=i;
Ali[i].onclick=function () {for
(var j=0;j<ali.length;j++) {
ali[j].classname= ';//Cancel menu style
Abox[j]. Classname= ' hide ';//Hide All Tabdiv
}
ali[this.index].classname= ' selected ';
Abox[this.index].classname= ';
}}
}
This is simply rude, completely without consideration if tabmenu, Tabbox have multiple styles, the situation is not adapted to the project is just a thought. Many places need to be perfected. The following consider the case of multiple class tags, but generally have more than one class, now need to remove a class, add class skills.
3.1 Original JS class to add and delete.
Window.onload=function () {var otab=document.getelementbyid (' tab ');
var ali=otab.getelementsbytagname (' Li ');
var otabbox=otab.getelementsbytagname (' div ') [1];
var abox=otabbox.getelementsbytagname (' div ');
for (Var i=0;i<ali.length;i++) {ali[i].index=i; Ali[i].onclick=function () {for (Var j=0;j<ali.length;j++) {var aclass=ali[j].classname.split (');//element. Clas Sname is a string that cuts the array of Var aclass1=abox[j].classname.split (');//The same method gets box's for (Var z=0;z<aclass.length;z++) {if (aclass[z]== ' selected ') {Aclass.splice (z,1);//using the Splice method of the array to remove the found class}} for (Var
k=0;k<aclass1.length;k++) {if (aclass1[k]== ' hide ') {aclass1.splice (k,1);
} ali[j].classname=aclass.join (");//All menu removes selected style abox[j].classname+= ' hide ';/all box is hidden Abox[this.index].classname=aclass1.join (");/Current box displays ali[this.index].classname+= ' selected ';//Current menu adds Select
Style }
}
}
}
Pro-Test effective, but are written in a way of a bit messy, and more than the time efficiency is also a problem, but the class should not be very many bar = = later to optimize it, this function with jquery is very simple.
The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
