排他原理——点击按钮对应的div呈现出来

最新推荐文章于 2024-04-03 12:49:30 发布

pleasureOnFinger

最新推荐文章于 2024-04-03 12:49:30 发布

阅读量1.8k

点赞数

本文链接：https://blog.csdn.net/pleasureOnFinger/article/details/53166500

版权


<head>
    <meta charset="UTF-8">
    <title>排他原理</title>
    <style>
        .box{
            width: 400px;
            margin: 100px auto;
            border: 1px solid red;
        }
        .bottom div{
            width:390px;
            height: 400px;
            border: 1px solid green;
            display: none;
        }
        .bottom .show{
            display: block;
        }
        .puple{
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="top">
            <button>第一个</button>
            <button>第二个</button>
            <button>第三个</button>
            <button>第四个</button>
        </div>
        <div class="bottom" id="bottom">
            <div class="show">第一个</div>
            <div>第二个</div>
            <div>第三个</div>
            <div>第四个</div>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
    window.onload=function(){
        var btns=document.getElementsByTagName("button");
        var divs=document.getElementById("bottom").getElementsByTagName("div");
        for(var i=0;i<btns.length;i++){
            btns[i].index=i;//此处为难点，意思是给每一个按钮设置一个index属性
            btns[i].onclick= function () {
                //清空所有的按钮和div的类
                for(var j=0;j<btns.length;j++){
                    btns[j].className='';
                    divs[j].className='';
                }
                //把当前的按钮和对应的div的class设置成对应格式
                this.className="puple";
                divs[this.index].className="show";//this.index=btns[i].index 记录了当前点击按钮的索引值
            }
        }
    }
</script>