js选项卡

woderuiggya

于 2020-06-01 21:40:19 发布

阅读量117

点赞数

CC 4.0 BY-SA版权

文章标签： js

本文链接：https://blog.youkuaiyun.com/woderuiggya/article/details/106482467

    <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>