两个div怎么实现点击一次一个出现，另一个消失

两个div位置一样，样式一样，z-index不一样，怎么实现点击一次使div高的消失，div低的出现，再点击一次，div高的出现，div低的消失

用js 设置他们的 display属性，或者用js 降低zindex，使其比另一个小。我给你个参考代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 500px;
            height: 500px;
            background-color: #ccc;
            position: absolute;
            z-index: 1;
        }
        .box2 {
            width: 500px;
            height: 500px;
            background-color: red;
            position: absolute;
            z-index: 0
        }
        .box3 {
            width: 500px;
            height: 500px;
            background-color: #ccc;
            position: absolute;
            z-index: 1;
            left: 500px
        }
        .box4 {
            width: 500px;
            height: 500px;
            background-color: red;
            position: absolute;
            z-index: 0;
            left: 500px
        }
    </style>
</head>
<body>
    <!-- 方法一 -->
    <div class="box1" onclick="clickBox()">1</div>
    <div class="box2" onclick="clickBox2()">2</div>
    <!-- 方法二 -->
    <div class="box3" onclick="hideBox()">1</div>
    <div class="box4"onclick="hideBox()">2</div>
    <script>
        //如代码，默认情况下  ziindex 大的显示在最上层
        let box1 = document.getElementsByClassName('box1')[0];
        let box2 = document.getElementsByClassName('box2')[0];
        function clickBox() {
            box1.style.zIndex = 0;
            console.log(box1.style)
        }
        function clickBox2() {
            box1.style.zIndex = 1;
        }

        // 或者用这个方法, 

        let box3 = document.getElementsByClassName('box3')[0];
        let box4 = document.getElementsByClassName('box4')[0];
        function hideBox() {
            if (box3.style.display == 'block' || box3.style.display == '') {
                box3.style.display = 'none';
            } else {
                box3.style.display = 'block';
            }
        }
    
    </script>
</body>
</html>

点击事件改变样式里z-index值不就行了，点击当前按钮按钮，将当前按钮的z-index变成零，另一个按钮的变成1就好了

首先获取到这俩元素
原生的话 通过给俩div起不同的class名，通过document.getElementsByClassName 获取到div 通过样式 display: block/none 控制隐藏显示
vue的话