通过js事现选项卡

最新推荐文章于 2021-09-06 15:56:51 发布

RashaunHan

最新推荐文章于 2021-09-06 15:56:51 发布

阅读量86

点赞数

分类专栏： html5 javascript

html5 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

javascript

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>选项卡</title>
        <style type="text/css">
            div {
                height: 220px;
                position: absolute;
                z-index: -999;
                width: 280px;
                top: 47px;
                border: 2px solid red;
                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 red;
            }
        </style>
    </head>
    <body>
        //默认显示第一个选项卡和div
        <ul>
            <li class="a">房产</li>
            <li>家居</li>
            <li>二手房</li>
        </ul><br />
        <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>
</html>
<script type="text/javascript">
    window.onload = function() {
        var li = document.querySelectorAll("li"); 
        var div = document.querySelectorAll("div");
        for(var i = 0; i < li.length; i++) {
            li[i].index = i; 
            li[i].onclick = function() {
                //隐藏所有选项卡及div
                for(var i = 0; i < li.length; i++) {
                    li[i].className = " ";
                    div[i].style.display = "none";
                };
                //显示选中的选项卡以及div
                this.className = "a";
                div[this.index].style.display = "block"; 
            };
        };
    };
</script>