http://www.imooc.com/code/1912 编程挑战课程实现代码-原创手记-慕课网

<!DOCTYPE html>
<html>

<head lang="zh">
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    *:focus {
        outline: none;
    }

    .content {
        margin: 1em;
        position: relative;
        height: 3em;
        min-width: 26em;
    }

    .boxFather {
        position: relative;
        margin: 1em;
        z-index: 2;
        width: 36em;
        min-width: 30em;
        height: 7em;
    }

    ul {
        position: absolute;
        height: 3em;
    }

    ul li {
        display: inline-block;
        width: 8em;
        position: relative;
        height: 100%;
        border: 2px solid #c0c0c0;
        border-bottom:0px;
        float: left;
        margin-left: 4px;
        border-bottom: none;
        line-height: 3em;
        text-align: center;
        cursor: pointer;
        background-color: #fff;
    }

    .box {
        border: 1px solid blue;
        position: absolute;
        width: 100%;
        height: 100%;
        padding: 1em;
        top: -18px;
        text-align: center;
        left: 4px;
    }

    .active {
        border-top: 2px solid brown;
        border-left: 2px solid brown;
        border-right: 2px solid brown;
        z-index: 9;
    }

    .hide {
        display: none;
    }

    .show {
        display: block;
        border: 2px solid brown;
    }
    </style>
    <script type="text/javascript">
    </script>
</head>

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

        var lis = d.querySelectorAll('li'),
            boxs = d.querySelectorAll('.box');

        for (var i = 0; i < lis.length; i++) {
            var _this;
            lis[i].addEventListener('click', function() {
                for (var j = 0; j < lis.length; j++) {
                    lis[j].className = '';
                    boxs[j].className = 'box hide';
                }
                this.className = 'active';
                ! function() {
                    var z;
                    for (var x = 0; x < lis.length; x++){
                        if(lis[x].className == 'active'){
                            z = x;
                        }
                    }
                    boxs[z].className='box show';
                }()
            })
        }
    }
    </script>
</body>
</html>