                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

交作业啦，对于CSS还不太熟悉，需要去学习！！

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
     /* CSS样式制作 */  
    table {
        background-color: #ff0000;
    }
    ul {
        height: auto;
        width: auto;
        cursor:pointer;
    }
    li {
        list-style: none;
        float: left;
        height: 35px;
        line-height: 35px;
        width: 70px;
        text-align: center;
        margin: 5px;
        border: 1px solid #9a4f4f;
        position: relative;
        left: 0px;
    }
    .table1 {
        border-top: 2px solid #9a4f4f;
        background-color: #fffff2;
        border-bottom: 0px;
        z-index: 99;
        border-left: 1px solid #9a4f4f;
        border-right: 1px solid #9a4f4f;
    }
    .list {
        font-size: 14px;
        position: absolute;
        top: 56px;
        left: 45px;
        display: block;
        width: 250px;
        border: 1px solid #9a4f4f;
        border-top: 2px solid #9a4f4f;
        padding: 5px;
        background-color: #fffff2;
    }
    div {
        display: none;
    }
   </style>
    <script type="text/javascript">
         
    // JS实现选项卡切换
    function changeC(obj){
        var divs = document.getElementsByTagName("div");
        var lis = obj.parentNode.childNodes;
        for(var i=0;i<3;i++){
            divs[i].className="";
            lis[i].className="";
            if(divs[i].id==obj.getAttribute("name")){
                divs[i].className="list";
                obj.className="table1";
            }
        }
    }
    
    </script>
 
</head>
<body>
<!-- HTML页面布局 -->
<ul>
    <li class="table1" name="house" onclick="changeC(this)">房产</li>
    <li name="JJ" onclick="changeC(this)">家居</li>
    <li name="SHH" onclick="changeC(this)">二手房</li>
</ul>
<div id="house" class="list">
      275万购昌平邻铁三居 总价20万买一居
    200万内购五环三居 140万安家东三环
    北京首现零首付楼盘 53万购东5环50平
    京楼盘直降5000 中信府 公园楼王现房
</div>
<div id="JJ" class="">
      40平出租屋大改造 美少女的混搭小窝
    经典清新简欧爱家 90平老房焕发新生
    新中式的酷色温情 66平撞色活泼家居
    瓷砖就像选好老婆 卫生间烟道的设计
</div>
<div id="SHH" class="">
      通州豪华3居260万 二环稀缺2居250w甩
    西3环通透2居290万 130万2居限量抢购
    黄城根小学学区仅260万 121平70万抛!
    独家别墅280万 苏州桥2居优惠价248万
</div>
 
</body>
</html>