javascript 原生JS实现选项卡的切换

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            height: 220px;
            position: absolute;
            z-index: -999;
            width: 280px;
            top: 47px;
            border: 2px solid darkred;
            left: 43px;
            display: none;
        }

        li {
            width: 80px;
            height: 29px;
            text-align: center;
            line-height: 30px;
            border: 1px solid #ccc;
            float: left;
            margin-left: 6px;
            list-style: none;
            cursor: pointer;
        }

        .a {
            border-bottom: 5px solid white;
            border-top: 2px solid darkred;
        }
    </style>
</head>

<body>
    <ul>
        <li class="a">房产</li>
        <li>家居</li>
        <li>二手房</li>
    </ul>

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

</body>
<script type="text/javascript"> 
    // JS实现选项卡切换 
    window.onload = function () {
        var li = document.querySelectorAll("li");//querySelectorAll这个标签的作用是选取页面所有的li标签
        var div = document.querySelectorAll("div");
        for (var i = 0; i < li.length; i++) {
            li[i].index = i;//给每个按钮添加一个自定义属性，存的是他们对应的索引值
            console.log(li[i].index)
            li[i].onclick = function () {
                for (var i = 0; i < li.length; i++) {
                    li[i].className = " ";
                    div[i].style.display = "none";
                };
                this.className = "a";
                div[this.index].style.display = "block";//把当前点击li的下表传入div中，使其下标相同，因为他们都默认输出的是 0 1 2  所以可以对应输出
            };
        };
    };

</script>

</html>
javascript 原生JS实现 选项卡的切换

javascript 原生JS实现选项卡的切换
