js小功能2：切换

HTML：

<div id="tb">
<ul><li class="on">房产</li><li>家居</li><li>二手房</li></ul>
<div>
    <p>275万购昌平邻铁三居 <span>总价20万买一居</span></p>
    <p>200万内购五环三居 <span>140万安家东三环</span></p>
    <p>北京首现零首付楼盘 <span>53万购东5环50平</span></p>
    <p>京楼盘直降5000 中信府 <span>公园楼王现房</span></p>
</div>
<div class="hide">
     <p>40平出租屋大改造 <span>美少女的混搭小窝</span></p>
     <p>经典清新简欧爱家<span>90平老房焕发新生</span></p>
     <p>新中式的酷色温情 <span>66平撞色活泼家居</span></p>
     <p>瓷砖就像选好老婆 <span>卫生间烟道的设计</span></p>
</div>
<div class="hide">
     <p>通州豪华3居260万 <span>二环稀缺2居250w甩</span></p>
     <p>通州豪华3居260万 <span>二环稀缺2居250w甩</span></p>
     <p>通州豪华3居260万 <span>二环稀缺2居250w甩</span></p>
     <p>通州豪华3居260万 <span>二环稀缺2居250w甩</span></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="";
    }
  }
}