×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 PADS Logic 原理图
  • ¥15 PADS Logic 图标
  • ¥15 电脑和power bi环境都是英文如何将日期层次结构转换成英文
  • ¥15 DruidDataSource一直closing
  • ¥20 气象站点数据求取中~
  • ¥15 如何获取APP内弹出的网址链接
  • ¥15 wifi 图标不见了 不知道怎么办 上不了网 变成小地球了
  • ¥50 STM32单片机传感器读取错误
  • ¥50 power BI 从Mysql服务器导入数据，但连接进去后显示表无数据