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

参考众多大神的杰作，总算理解清楚了，发个完整作参考咯

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
     /* CSS样式制作 */
    *{
        font:12px/1.5em 微软雅黑,sans-serif;
        padding:0;
        margin:0;
    }
    #tabs{
        width:300px;
        height:170px;
        padding:5px;
        margin:18px;
    }
    #table{
        height:30px;
        display:block;
        list-style:none;//清除圆点,没有好像也可以；    }
    #table li{
        cursor:pointer;//修改指针为手指形状；
        float:left;
        text-align:center;
        line-height:28px;
        width:60px;
        height:28px;
        margin:0,0,0,3px;
        display:inline-block;
        background:#fff;
    }
    .li1{
        border:1px solid #ccc;
        border-top:2px solid red;
        border-bottom:2px solid #fff;
    }
    .li2{
        border:1px solid #ccc;
        border-bottom:0px;    }
    #tabs div{
        border:1px solid blue;
        border-top:2px solid red;
        background:#fff;
        height:120px;
        padding:10px;
        line-height:25px;
    }
    .box1{
        display:block;
    }
    .box2{
        display:none;
    }
    </style>
    <script type="text/javascript">
    window.onload=function()
    {
        var x=document.getElementById("tabs");
        var a=document.getElementsByTagName("li");
        var b=x.getElementsByTagName("div");
     for(i=0;i<a.length;i++)
     {
        a[i].index=i;
        console.log(a[i]);//清除所有a的class,没有也行;
        a[i].onmouseover=function()//onclick也一样;
        {
            for(i=0;i<a.length;i++)
            {
                a[i].className="li2";
                b[i].className="box2";
            }
            a[this.index].className="li1";
            b[this.index].className="box1";
        }//先隐藏所有，再显示当前；
     }
    }
   //JS实现选项卡切换


    </script>

</head>
<body>

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