点菜单换色

最新推荐文章于 2024-08-04 21:23:42 发布

杯倾川·苶陽

最新推荐文章于 2024-08-04 21:23:42 发布

阅读量367

点赞数 5

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/weixin_72636650/article/details/138748836

版权

点击换色，首先可以用两种方法实现，点击任意一个菜单的时候，剩下的隐藏，不过位置得是一样的，还有一种就是点击之后直接改变背景颜色，我这里做的是点击任意一个菜单的时候剩下的隐藏

<!DOCTYPE html>
<html lang="zh">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <style>
  /* 设置全局样式 */
  * {
   padding: 0;
   margin: 0;
  }

  /* 菜单样式 */
  .menu {
   text-align: center;
  }

  /* 按钮样式 */
  .me {
   font-size: 45px;
   border: none;
  }

  /* 子菜单容器样式 */
  .sub {
   width: 60%;
   height: 200px;
   margin-left: 20%;
   text-align: center;
  }

  /* 子菜单一样式 */
  .sub_one {
   margin-top: 50px;
   background-color: aqua;
   position: relative;
   top: 20px;
  }

  /* 子菜单二样式 */
  .sub_two {
   background-color: pink;
   position: absolute;
   top: 129.2px;
  }

  /* 子菜单三样式 */
  .sub_three {
   background-color: red;
   position: absolute;
   top: 129.2px;
  }
 </style>
 <body>
  <!-- 菜单容器 -->
  <div class="menu">
   <button class="me">菜单一</button>
   <button class="me">菜单二</button>
   <button class="me">菜单三</button>
  </div>
  <!-- 子菜单容器 -->
  <div class="sub sub_one"></div>
  <div class="sub sub_two"></div>
  <div class="sub sub_three"></div>

        <script>
            // 获取菜单按钮和子菜单
            let me = document.querySelectorAll('.me');
            let sub = document.querySelectorAll('.sub');
            
            // 遍历菜单按钮并添加点击事件监听器
            for (let i = 0; i < me.length; i++) {
                me[i].addEventListener('click', function() {
                    // 隐藏所有子菜单
                    for (let j = 0; j < sub.length; j++) {
                        sub[j].style.display = 'none';
                    }
                    // 显示当前对应的子菜单
                    sub[i].style.display = 'block';
                })
            }
        </script>

  
 </body>
</html>

里面都是有具体的注释的，可以好好看一看

杯倾川·苶陽

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
点菜单换色

点击换色，首先可以用两种方法实现，点击任意一个菜单的时候，剩下的隐藏，不过位置得是一样的，还有一种就是点击之后直接改变背景颜色，我这里做的是点击任意一个菜单的时候剩下的隐藏。里面都是有具体的注释的，可以好好看一看。
复制链接

扫一扫