js实现选项卡切换效果

chichaojing6253

于 2016-06-15 11:01:00 发布

阅读量89

点赞数

原文链接：https://my.oschina.net/smzdqiang/blog/692123

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
        *{
            margin:0px;
            padding:0px;
        }
        #tab{
            margin:10px;
        }
       #tab ul{
            list-style:none;
            height:36px;
            border-bottom:2px solid black ;
            display:block;
       }
       #tab ul li{
           float:left;
           display:inline-block;
           padding:0px 15px;
           height:34px;
           line-height:34px;
           margin-right:5px;
           border:1px solid #ccc;
           border-bottom:none;
           cursor:pointer;
       }
       #tab div{
           padding:5px;
           border:1px solid #ccc;
           border-top:none;
            
       }
       #tab ul li.on{
           border-top:2px solid black;
           border-bottom: 2px solid white;
       }
       .hide{
           display:none;
       }
        
    </style>
    <script type="text/javascript">
        window.onload=function(){
         var mytab =document.getElementById("tab");
         var myul=mytab.getElementsByTagName("ul")[0];
         var myli=myul.getElementsByTagName("li");
         var mydiv=mytab.getElementsByTagName("div");
        //  alert(mydiv.length)
         for(i=0,len=myli.length;i<len;i++){
             myli[i].index=i;
             myli[i].onclick=function(){
                 for(var n=0;n<len;n++){
                     myli[n].className="";
                     mydiv[n].className="hide";
                 }
                 this.className="on";                 
                 mydiv[this.index].className="";
                  
             }
         }
        }
     
    </script>
</head>
<body>
<!-- HTML页面布局 -->
<div id="tab">
    <ul>
        <li class="on">房产</li>
        <li>家居</li>
        <li>二手房</li>
    </ul>
    <div>
         275万购昌平邻铁三居 总价20万买一居
        200万内购五环三居 140万安家东三环
        北京首现零首付楼盘 53万购东5环50平
        京楼盘直降5000 中信府 公园楼王现房
    </div>
    <div class="hide">
        40平出租屋大改造 美少女的混搭小窝
     经典清新简欧爱家 90平老房焕发新生
     新中式的酷色温情 66平撞色活泼家居
     瓷砖就像选好老婆 卫生间烟道的设计
    </div>
    <div class="hide">
        通州豪华3居260万 二环稀缺2居250w甩
     西3环通透2居290万 130万2居限量抢购
     黄城根小学学区仅260万 121平70万抛!
     独家别墅280万 苏州桥2居优惠价248万
    </div>
</div>
</body>
</html>

转载于:https://my.oschina.net/smzdqiang/blog/692123