js选项卡

最新推荐文章于 2024-12-04 13:26:46 发布

原创最新推荐文章于 2024-12-04 13:26:46 发布 · 129 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

本文介绍了一种使用CSS和JavaScript结合的方式，实现按钮控制页面上div元素的显示与隐藏。通过为div元素添加和移除'active'类，利用CSS的display属性，实现了动态控制元素的可见性。

    <style>
        #div1 div{width: 200px;height: 200px;border: 1px solid black;
        display: none}
        #div1 div.active{
            display: block;
        }
    </style>
</head>
<body>
<div id="div1">
    <button>11111</button>
    <button>2222222</button>
    <button>33333</button>
    <button>44444444</button>
    <div class="active">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>
<script>
    var div1=document.getElementById("div1")
    var aBtn=div1.getElementsByTagName("button")
    var aDiv=div1.getElementsByTagName("div");
    for(var i=0;i<aBtn.length;i++){
        aBtn[i].index=i;

        aBtn[i].onclick=function () {
            for(var j=0;j<aBtn.length;j++){
                aBtn[j].style.background=""
                aDiv[j].className=""
            }
            this.style.background="red"
            aDiv[this.index].className="active"
        }
    }
</script>
</body>