js

最新推荐文章于 2025-05-23 20:42:37 发布

learnerq

最新推荐文章于 2025-05-23 20:42:37 发布

阅读量151

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/learnerq/article/details/78548384

版权

选项卡切换功能
这里写图片描述

<style type="text/css">
.purple {
 background-color: purple;
 }
 .bottom .show {
     display: block;
 }
</style>
<script type="text/javascript">
    window.onload = function(){
        var btns = document.getElementsByTagName("button");
            var divs = document.getElementById("divs").getElementsByTagName("div");
                for(var i=0;i<btns.length;i++){
                    btns[i].index = i;//保存当前索引
                    btns[i].onclick = function(){
                        for(var j=0;j<btns.length;j++){
                            btns[j].className = "";
                            divs[j].className = "";
                        }   
                        this.className = "red";
                        divs[this.index].className = "show";
                    }

                }
     }  
</script>     
<body>
    <div class="box">
        <div class="top">
            <button>第一个</button>
            <button>第二个</button>
            <button>第三个</button>
            <button>第四个</button>
            <button>第五个</button>
        </div>
        <div class="bottom" id="divs">
            <div class="show">1好盒子</div>
            <div>2好盒子</div>
            <div>3好盒子</div>
            <div>4好盒子</div>
            <div>5好盒子</div>
        </div>
    </div>
</body>