完成了啦啦啦啦-慕课网

完成了啦啦啦啦

来源：10-1 编程挑战

qq_慕盖茨8319076

2020-07-15 12:54

<!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>