最简单tab切换

罗伟兆
2023-12-01
以前都是用jquery，只要布局好，用一个siblings()方法就出来了
现在学原生js
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
     /* CSS样式制作 */  
     .clearfix:after{
         visibility: hidden;
         display:block;
         content:"";
         font-size:0px;
         clear:both;
         height:0;
     }
     ul li{list-style:none;float:left; margin:15px;}
     .hide{display:none;}
     .on{color:red;}
    </style>
    <script type="text/javascript">
    window.οnlοad=function(){
        var oTab= document.getElementById("tabs");
        var oUl = oTab.getElementsByTagName("ul")[0];
        var oLis = oUl.getElementsByTagName("li");
        var oDivs = oTab.getElementsByTagName("div");
        for(var i=0;i<oLis.length;i++)
        {
            oLis[i].index=i;
            oLis[i].οnclick=function(){
                for(var n=0;n<oLis.length;n++)
                {
                    oLis[n].className="";
                    oDivs[n].className="hide";
                }
                this.className="on";
                oDivs[this.index].className="";
            }
        };
    }
</script>
 
</head>
<body>
<!-- HTML页面布局 -->
<div id="tabs">
    <ul class="clearfix">
        <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>
最简单tab切换

相关阅读

相关文章

相关问答

相关文档
