为了账号安全,请及时绑定邮箱和手机立即绑定

完成了啦啦啦啦

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
      
        .wap{
            width:460px;
            height:400px;
            position:absolute;
            left:50%;
            top:50%;
            margin-left:-230px;
            margin-top:-200px;
            background-color:gray;
            border:1;
            margin:1;
        }
        .menu{
            width:460px;
            height:100px;
            position:absolute;
            border:5px;
            border:1px solid black;
        }
        li{
            border:1px solid black;
           display:block;
           float:left;
            height:40px;
            width:100px;
            text-align:center;
            line-height:40px;
            padding-left:10px;
            cursor:pointer;
            font-size:14px;
            position:relative;
            border-radius:5px;
        }
        li:hover{
            background-color:white;
             height:50px;
            width:120px;
            border-radius:25px;
        }
        li span:hover{
            color: #c81623;
        }
        .menu_show{
            height:250px;
            width:400px;
            top:150px;
            left:30px;
            position:relative;
            text-align:center;
        }
        .none{
            display:none;
        }
    </style>
    <script type="text/javascript">
      function over(e){
         var darr=document.getElementsByTagName("div");
         for(var i=0;i<darr.length;i++)
            if(darr[i].getAttribute("class")=="menu_show none"){
                darr[i].style.display="none"
            }
         for(var i=0;i<darr.length;i++)
            if(e==darr[i].getAttribute("id")){
                darr[i].style.display="block"
                break;
            }
        }
    
    </script>
 
</head>
<body>
<div id="w" class="wap">
    <div id="m" class="menu">
        <ul>
            <li onmouseover="over('a')"  ><span>房产</span></li>
            <li onmouseover="over('b')"  ><span>家居</span></li>
            <li onmouseover="over('c')" ><span>二手车</span></li>
        </ul>
       
    </div>
    <div id="a" class="menu_show none">
        275万购昌平邻铁三居 总价20万买一居
    200万内购五环三居 140万安家东三环
    北京首现零首付楼盘 53万购东5环50平
    京楼盘直降5000 中信府 公园楼王现房
    </div>
    <div  id="b" class="menu_show none">
        40平出租屋大改造 美少女的混搭小窝
     经典清新简欧爱家 90平老房焕发新生
     新中式的酷色温情 66平撞色活泼家居
     瓷砖就像选好老婆 卫生间烟道的设计
    </div>
    <div id="c" class="menu_show none">
        通州豪华3居260万 二环稀缺2居250w甩
     西3环通透2居290万 130万2居限量抢购
     黄城根小学学区仅260万 121平70万抛!
     独家别墅280万 苏州桥2居优惠价248万
    </div>
</div> 
</body>
</html>

正在回答

代码语言

1 回答

积分积分!!!

1 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
JavaScript进阶篇
  • 参与学习       468195    人
  • 解答问题       21891    个

本课程从如何插入JS代码开始,带您进入网页动态交互世界

进入课程

完成了啦啦啦啦

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信