JavaScript Learning Note 2 tab Toggle

1, Tab switch abbreviated version 1

The page layout is as follows:

1 <div id= "tab" > 2      
 3         <span class= "select" > Title one </span> 4         <span> title two </span> 5         <span> Title III </span> 6      7     <ul id= "Content" > 8         <li class= "Show" > Contents one </li > 9         <li> content two </li>         <li> content three </li>     </ul> </div>                    

About the Click event Style is as follows:

1 /* Default Style & post-click Style */ 2 #title. select{3    color: #FFFFFF; 4     background: #0AA770; 5 }6#content. show{7    display:block; 8 }

The default style is as follows:

JS Code:

1  varTit=document.getelementbyid (' title ');2   varCon=document.getelementbyid (' content ');3   varSpans=tit.getelementsbytagname (' span ');4   varLis=con.getelementsbytagname (' Li ');5   //The first for loop gives each span binding a point -and-click event6    for(vari = 0, len= spans.length; i < Len; i++){7spans[i].onclick=function(){8          //The second for Loop traversal finds the current click Yes span9           for(varj = 0,len= Spans.length; J < Len; J + +) {Ten                 if(spans[j]== This) { One                      This. classname= ' SELECT '; A                     //spans[v].classname= ' select ';//effect Ibid. -Lis[j].classname= ' Show '; -}Else{//if it is not selected, empty settings theSpans[j].classname= "; -Lis[j].classname= "; -                 } -          } +       } -}

2, Tab switch abbreviated version 2

Page layout and default style settings are the same as above

JS Code:

1 varTit=document.getelementbyid (' title ');2   varCon=document.getelementbyid (' content ');3   varSpans=tit.getelementsbytagname (' span ');4   varLis=con.getelementsbytagname (' Li ');5   //The first for loop gives each span binding a point -and-click event6    for(vari = 0, len= spans.length; i < Len; i++){7       spans[i].index=i; // different : Gets the index value of the current click event to set the binding object to use later8spans[i].onclick=function(){9          //The second for Loop traversal finds the current click Yes spanTen          // empty all bound objects One           for(varj = 0,len = Spans.length; J < len;j++) { ASpans[j].classname= "; -Lis[j].classname= "; -          } the          //the object is bound to the Click event individually, and the index value is derived from the previously acquired -           This. classname= ' SELECT '; -lis[ This. Index].classname= ' Show '; -       } +}

JavaScript Learning Note 2 tab Toggle