js 2 small features: switch

HTML：

< Div the above mentioned id = "TB" > 
< ul > < li class = "ON" > real estate </ li > < li > Home </ li > < li > second-hand housing </ li > </ ul > 
< div > 
    < the p- > 2.75 million purchase of Changping o iron Sanju < span > total 200,000 to buy a home </ span > </ the p- > 
    < the p- > 200 Wan buy rings within Sanju <span > 140 million An Jiadong tricyclo </span > </ the p- > 
    < the p- > Beijing first appearance zero down payment real estate < span > 53 Wan buy East 5 ring 50 level </ span > </ the p- > 
    < the p- > Beijing real estate straight down 5,000 CITIC House < span > Park House King existing homes </ span > </ the p- > 
</ div > 
< div class = "hide" > 
     < the p- > 40 flat rental makeover < span > girl mix nest </ span > </ the p- >
     <p>Classic love fresh and simple European home < span > 90 flat old house breathes new life </ span > </ the p- > 
     < the p- > new Chinese style Cool color warmth of < span > 66 lively household level hit color </ span > </ the p- > 
     < the p- > tile wife selected as < span > toilet flue design </ span > </ the p- > 
</ div > 
< div class = "hide" > 
     < the p- > Tongzhou luxury 3 ranking 2.6 million < span >2 UN bicyclic scarce rejection 250w </span > </ P > 
     < P > Tongzhou Deluxe 3 UN-2600000 < span > bicyclic scarce 2 UN rejection 250w </ span > </ P > 
     < P > Tongzhou Deluxe 3 UN-2600000 < span > bicyclic UN scarce 2 250w rejection </ span > </ the p- > 
     < the p- > Tongzhou luxury 3 ranking 2.6 million < span > Ring scarce 2 ranking 250w rejection </ span > </ the p- > 
</ div > 
</ div >

CSS：

     *{margin:0;padding:0;}
     #tb{width:300px;height:200px;padding:5px;margin:20px;}
      #tb ul{list-style:none;width:300px;height:40px;line-height:40px;border-bottom:2px solid red;display:block;}
      #tb ul li{float:left;list-style:none; display:inline-block;width:60px;border:1px solid #ccc;border-bottom:none;text-align:center;height:38px;line-height:38px;margin:0px 3px;}
  
    
       #tb div{height:160px;line-height:25px;border:1px solid blue;border-top:none;padding:5px;}
       #tb div p{font-size:14px;}
       #tb ul li.on{border-top:2px solid red;border-bottom:2px solid #fff;}
       .hide{display:none;}

JS：

window.onload=function(){
  var vTb=document.getElementById("tb");
var vUl=vTb.getElementsByTagName("ul")[0];
var vLi=vUl.getElementsByTagName("li");
var vDiv=vTb.getElementsByTagName('div');

  for(var i=0;i<vLi.length;i++){
    console.log(vLi[i]);
    vLi[i].index=i;
     console.log('序号'+i);
    vLi[i].onclick=function(){
       for(var n=0;n<vLi.length;n++){
        vLi[n].className="";
         vDiv[n].className="hide";
       }
       this.className="on";
       vDiv[this.index].className="";
    }
  }
}