JS Implementation tab Toggle

1.:

2. Implement

Divided into two parts: one is tab, the other is tab content

3. Code

1<! DOCTYPE html>234<style type= "Text/css" >5body{font-size:14px;margin:10px;padding:0px;} 6#wraper ul {display:block; list-style:none;height:20px; line-height:20px;}7#wraper ul Li {float: Left; Display:block;width:45px;text-align:center; margin:0px 3px;padding:5px;cursor:pointer;border:1px Gray solid;border-Bottom:none;}8#wraper div{border:1px black solid;width:250px; line-height:30px; padding:5px;}9 . Hide {display:none;}Ten</style>
       One <script>12 window.onload=function () {14 var Wrap=document.getelementbyid ("Wraper");             var odiv=wrap.getelementsbytagname ("div"); var oli=wrap.getelementsbytagname ("Li"); 16                     for (Var i=0;i<oli.length;i++) {oli[i].index=i;18 oli[i].onclick=function () {19                     for (Var j=0;j<odiv.length;j++) {odiv[j].classname= "hide"; 21 }22 odiv[this.index].classname= "";}24} < /script>
 - -<body> in<div id= "Wraper" > -<ul> to<li> Real Estate </li> +<li> Home </li> -<li> Secondhand </li> the</ul> *<div > $2.75 million buy Changping neighborhood triathlon Total Price 200,000 buy a home <br>Panax Notoginseng2 million within the five rings of the three 1.4 million home to the east third ring <br> -Beijing 0 First pay property 530,000 buy East 5 ring 50 Ping <br> theBeijing property straight down 5000 Citic House Park King House <br> +</div> A<div class= "Hide" > the40 Flat rental house big makeover beauty girl's mixed-up small nest <br/> +Classic Fresh Jean Home 90 flat old room glow <br/> -New Chinese cool color warmth 66 Flat contrast lively home <br/> $Tiles are like choosing a wife. Design of the toilet flue <br/> $</div> -<div class= "Hide" > -Tongzhou Luxury 3 2,600,002 ring scarce 2 250w throw <br/> theWest 3 ring Permeability 2 29,001,300,002-bedroom Limited sale <br/> -Yellow Cheng Gen Elementary School District only 2,600,121 flat 700,000 throw!<br/>WuyiExclusive villa 2.8 million Suzhou Bridge 2 discount price 2.48 million <br/> the</div> -</div> Wu</body> -

JS Implementation tab Toggle