前端之新闻切换卡

最新推荐文章于 2023-02-13 16:40:09 发布

greenHandCh

最新推荐文章于 2023-02-13 16:40:09 发布

阅读量466

点赞数

文章标签：前端新闻

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
     /* CSS样式制作 */  
     li{
       list-style-type:none;
        float:left;
        width:100px;
        border:1px solid red;
        text-align:center;
       background-color:#fff;
     }  
     div{
        clear:both;
         float:left;
          border:1px solid red;
          width:304px;
          margin-left:40px; 
         border-top:none;
         padding-top:5px;
     }
     
     }
     #d1{display:block;}
     #d2{display:none;}
     #d3{display:none;}
     .tab{border-bottom:none;}
    </style>
    <script type="text/javascript">
         
    // JS实现选项卡切换
    window.οnlοad=function(){
        var li=document.getElementsByTagName('li');
        var div=document.getElementsByTagName('div');
        for(var i=0;i<li.length;i++){
            li[i].index=i;
            li[i].οnmοuseοver=function(){
                 for(var j=0;j<div.length;j++)
                {
                      li[j].className="";
                    div[j].style.display="none";
                }
                var This=this;
                This.className="tab";
                div[This.index].style.display="block";


        }
        }
        }
    
    </script>
 
</head>
<body>
<!-- HTML页面布局 -->
<ul>
    <li>房产</li>
    <li>家居</li>
    <li>二手房</li>
</ul>
<div id="d1">
 <pre>
  275万购昌平邻铁三居 总价20万买一居
  200万内购五环三居 140万安家东三环
  北京首现零首付楼盘 53万购东5环50平
  京楼盘直降5000 中信府 公园楼王现房
 <pre>
</div>
 <div id="d2">
 <pre>
  40平出租屋大改造 美少女的混搭小窝
  经典清新简欧爱家 90平老房焕发新生
  新中式的酷色温情 66平撞色活泼家居
  瓷砖就像选好老婆 卫生间烟道的设计
 <pre>
</div>
<div id="d3">
 <pre>
  通州豪华3居260万 二环稀缺2居250w甩
  西3环通透2居290万 130万2居限量抢购
  黄城根小学学区仅260万 121平70万抛!
  独家别墅280万 苏州桥2居优惠价248万
 <pre>
</div>
</body>
</html>

greenHandCh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端之新闻切换卡

实践题 - 选项卡 /* CSS样式制作 */ li{ list-style-type:none; float:left; width:100px; border:1px solid red; text-align:center; background-color:#fff
复制链接

扫一扫