Easy to implement JS tab switching effect _javascript skills

This is the effect diagram to implement:

One. HTML page layout

<!--HTML page layout-->
<ul class= "Tab_menu" >
 <li class= "selected" > Real estate </li>
 <li > Home </li>
 <li> second-hand house </li>
</ul>
<div class= "Tab_box" >
 <div> 2.75 million buy changping neighbour triathlon Total Price 200,000 bought a home
2 million inside purchase five rings three habitat 1.4 million home East three ring
 Beijing first now 0 first pay real estate 530,000 buy East 5 ring 50 ping
 Jing Real estate straight down 5000 Citic Mansion Park King Building </div>
 <div class= "Hide" >40 flat rental housing big transformation of the United States and the young girl's mix to build a
 classic fresh Jean home 90 Old room glow
 new Chinese cool warmth 66 flat color lively home
 tiles like choose a good Wife toilet smoke road design </div>
 <div class= "Hide" > Tongzhou luxury 3 2,600,002 rings scarce 2 250w dump
 West 3 ring Transparent 2 live 29,001,300,002 in limited snapping
 Yellow Cheng Gen Primary School district only 2.6 million 121, 700,000, throw!
Exclusive villa 2.8 million Suzhou Bridge 2 home Discount price 2.48 million </div>
</div> 

Two. CSS style design

* * CSS style production
/*{font-size:14px;
 Font-weight:bold 
}
 . tab_menu{
 List-style:none; 
margin-left:-35px;
 }
 li{
 Float:left;
 * * can't cover the position of the bottom edge, how to solve? * *
border:1px solid grey;
 Border-bottom:none;
 margin-bottom:-3px;
 margin-right:3px;
 width:70px;
 Text-align:center;
 PADDING:7PX 0;
 }
 li:hover{
 cursor:pointer
 }
 . tab_box{
 Clear:both;
 width:250px;
 BORDER:1PX solid blue;
 border-top:2px solid red;
 selected{
 Background-color:white;
 border-top:2px solid red;
 tab_box{
 padding:10px 80px 0 10px;
 height:170px
 }
 . Tab_box div{
 height:150px;
 line-height:30px
 }
 . hide{
 display:none;
 } 

Three. JS Implementation tab switch

var ul=document.getelementsbyclassname ("Tab_menu"),
liarr=ul[0].getelementsbytagname ("Li"),
div= Document.getelementsbyclassname ("Tab_box"),
divarr=div[0].getelementsbytagname ("div");

 function sibling (element) {
var a=[];
var P=element.parentnode.children;
for (Var i=0;i<p.length;i++) {
if (p[i]!==element) A.push (p[i));
return
 
A;
 }
 
for (Var i=0;i<liarr.length;i++) {
liarr[i].index=i;
Liarr[i].onclick=function () {
this.classname= "selected"; 
var otherliarr=sibling (this); 
for (Var j=0;j<otherliarr.length;j++) {
otherliarr[j].classname= "";
For 

(var z = 0; z < divarr.length; z++) {
divarr[z].classname= "hide";
}
divarr[this.index].classname= "";
}
 }

Wonderful topic Sharing:JavaScript Tab Action method Summary jquery Tab action Method Rollup

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.