【无标题】

最新推荐文章于 2024-07-08 12:24:36 发布

weixin_46504346

最新推荐文章于 2024-07-08 12:24:36 发布

阅读量139

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_46504346/article/details/134179778

版权

用JS写一个案例代码。当鼠标移入列表其中一个div的时候修改背景变成蓝色，移出时恢复默认颜色。当鼠标点击列表其中一个div的时候修改背景变成蓝色，点击其它的时候，前面点击过的需要恢复初始颜色，当前点击的div背景变蓝色。默认不选中

HTML部分

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>测试盒子</title>
    <link rel="stylesheet" href="/default.css" />
  </head>

  <body>
    <div id="nav">


      <!-- 内容开始 -->
      <div class="wrape">
        <!-- 左边开始 -->
        <div class="left">
          <div class="left_wrape">
            <div class="server">111111</div>
            <div class="server">222222</div>
            <div class="server">333333</div>
            <div class="server">444444</div>
            <div class="server">555555</div>
            <div class="server">666666</div>
            <div class="server">777777</div>
            <div class="server">888888</div>
            <div class="server">999999</div>
            <div class="server">101010</div>
          </div>
        </div>
        <script src="./js/index.js"></script>
        <!-- 左边结束 -->


    </div>
  </body>
</html>

引入外部JS部分

// 获取所有列表项
const items = document.querySelectorAll('.server');
// 循环遍历每个列表项
items.forEach(item => {
    // 添加鼠标点击事件
    item.addEventListener('click', () => {
        // 恢复所有列表项的初始颜色
        items.forEach(item => item.style.backgroundColor = '');
        // 修改当前点击项的背景颜色
        item.style.backgroundColor = 'pink';
    });
});

引入外部CSS

/* 左边开始  */
.left{
    width: 274px;
    height: 652px;
    border: 3px solid red;
    padding-top: 10px;
    /* background-color: aquamarine; */
    /* opacity: .3; */
    float: left;           
}
.left_wrape>div{
    box-sizing: border-box;
    height: 40px;
    margin-bottom: 5px;
    padding-top: 8px;
    text-align: center;
    background-color: #b6b6b6;
}
.left_wrape>.server:hover{
    background-color: beige;
}
.left_wrape>.server.active {
    background-color: blue;
}
/* 左边结束

在这里插入图片描述

weixin_46504346

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【无标题】

用JS写一个案例代码。当鼠标移入列表其中一个div的时候修改背景变成蓝色，移出时恢复默认颜色。当鼠标点击列表其中一个div的时候修改背景变成蓝色，点击其它的时候，前面点击过的需要恢复初始颜色，当前点击的div背景变蓝色。
复制链接

扫一扫

【无标题】

“相关推荐”对你有帮助么？