JS Real-Combat Chapter

To implement the selection of tabs:

As follows:

The code is as follows:

<! DOCTYPE html>"UTF-8"> <title> tab Selection demo</title> <style type="Text/css"> *{padding:0px;margin:0px;font:12px Normal"Microsoft Yahei";}        #tabs {width:290px;padding:5px;height:150px;margin:20px;} #tabs ul{list-style:none;display:block;height:30px;line-height:30px;border-bottom:2px SaddleBrown Solid;} #tabs ul Li{background: #fff; cursor:pointer ;float: left;list-style:none;height:28px;line-height:28px;margin:0px 3px;border:1px solid #aaaaaa; border-bottom:none; display:inline-block;width:60px;text-Align:center;} #tabs ul Li.on{border-TOP:2PX Solid saddlebrown;border-bottom:2px solid #fff;} #tabs Div{height:120px;line-HEIGHT:25PX;BORDER:1PX Solid #336699; border-top:none;padding:5px;}    . Hide{display:none;} </style> <script type="Text/javascript">window.onload=function () {varOtab = document.getElementById ("Tabs"); varOul = Otab.getelementsbytagname ("ul")[0]; varOlis = Oul.getelementsbytagname ("Li"); varOdivs= Otab.getelementsbytagname ("Div");  for(varI=0, Len = olis.length;i<len;i++) {Olis[i].index=i; Olis[i].onclick=function () { for(varn=0; n<len;n++) {Olis[n].classname=""; Odivs[n].classname="Hide"; }                      This. ClassName =" on"; odivs[ This. Index].classname ="";         }             }; }        </script> "Tabs"> <ul> <liclass=" on"> Real Estate </li> <li> home </li> <li> Secondary housing </li> </ul> <div>2.75 million purchase Changping Neighborhood Triathlon Total Price 200,000 buy a home<br>2 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>Beijing Real estate straight down 5000 Citic House Park house Wang existing<br> </div> <divclass="Hide">40 Flat rental house big makeover beauty girl's mixed up small nest<br>Classic Fresh Jean Home 90 flat old room glow Renaissance<br>new Chinese cool color warmth 66 Flat contrast lively home<br>tiles are like choosing a wife. Design of the flue in the bathroom<br> </div> <divclass="Hide">Tongzhou luxury 3 2,600,002 ring scarce 2 250w dump<br>West 3-ring permeability 2 29,001,300,002-bedroom Limited<br>Yellow Cheng Gen Elementary School District only 2,600,121 flat 700,000 throw!<br>exclusive villa 2.8 million Suzhou Bridge 2 special price 2.48 million<br> </div></div> </body>
JS Real-Combat Chapter