×46 2022-09-20 16:46 采纳率: 100%
浏览 38
已结题

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

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

  • 写回答

4条回答 默认 最新

  • 什么都想学的小白菜 2022-09-20 16:53
    关注

    用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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(3条)

报告相同问题？

问题事件

  • 系统已结题 9月28日
  • 已采纳回答 9月20日
  • 创建了问题 9月20日

悬赏问题

  • ¥15 下图接收小电路，谁知道原理
  • ¥15 装 pytorch 的时候出了好多问题，遇到这种情况怎么处理？
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线，如何释放宽带全部速度
  • ¥30 关于#r语言#的问题：如何对R语言中mfgarch包中构建的garch-midas模型进行样本内长期波动率预测和样本外长期波动率预测
  • ¥15 ETLCloud 处理json多层级问题
  • ¥15 matlab中使用gurobi时报错
  • ¥15 这个主板怎么能扩出一两个sata口
  • ¥15 不是，这到底错哪儿了😭
  • ¥15 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么