Using JS to implement tab switching effects

This is to be achieved:

I. HTML page layout

<!--HTML page layout--
<ul class= "Tab_menu" >
<li class= "selected" > Real estate </li>
<li> Home </li>
<li> Secondhand </li>
</ul>
<div class= "Tab_box" >
<div> 2.75 million buy Changping neighborhood triathlon Total Price 200,000 home
2 million within the five rings of the three 1.4 million home to the east third ring
Beijing 0 First pay property 530,000 buy East 5 ring 50 Ping
Beijing property straight down 5000 Citic House Park King House </div>
<div class= "Hide" >40 flat rental house big makeover beauty girl's mixed up small nest
Classic Fresh Jean Home 90 flat old room glow Renaissance
New Chinese cool color warmth 66 flat contrast lively home
Tiles are like choosing a wife. Design of the toilet flue </div>
<div class= "Hide" > Tongzhou luxury 3 2,600,002 ring scarce 2 250w Dump
West 3-Ring permeability 2 29,001,300,002-bedroom Limited
Yellow Cheng Gen Primary School District only 2,600,121 Ping 700,000 throw!
Exclusive villa 2.8 million Suzhou Bridge 2 discount price 2.48 million </div>
</div>

Two. CSS style creation

/* CSS style creation */
*{
font-size:14px;
Font-weight:bold;
}
. tab_menu{
List-style:none;
margin-left:-35px;
}
li{
Float:left;
/* Can not cover the bottom side of the position, 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= "";
}
}

Using JS to implement tab switching effects