废鸡程序员 2022-09-03 13:50 采纳率: 86%
浏览 23
已结题

点击到另个按钮的时候怎么取消掉上个按钮的背景色

点击到另个按钮的时候怎么取消掉上个按钮的背景色呢？
点击到另个按钮的时候怎么取消掉上个按钮的背景色呢？

img

  • 写回答

1条回答 默认 最新

  • Z_pigeon 2022-09-03 14:19
    关注

    定义个类.blue(background: blue, color:#fff), 点击的时候先根据blue类名，找出有这个类的删掉元素的这个类，然后再给当前点击对象添加blue类

    <!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>
        .province {
            background: #eee;
            color: #000;
            padding: 2px;
            border-radius: 4px;
            display: inline-block;
        }
        .blue {
            background: blue;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="all">
        <div class="province">北京</div>
        <div class="province">天津</div>
        <div class="province">上海</div>
    </div>
</body>
<script>
    let proList = document.getElementsByClassName('province')
    for (let i = 0; i < proList.length; i++) {
        proList[i].onclick = function () {
            let activeItem = document.getElementsByClassName('blue')
            if (activeItem.length > 0) {
                activeItem[0].classList.remove('blue')
            }
            proList[i].classList.add('blue')
        }
    }
</script>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

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

悬赏问题

  • ¥20 wireshark抓不到vlan
  • ¥20 关于#stm32#的问题：需要指导自动酸碱滴定仪的原理图程序代码及仿真
  • ¥20 设计一款异域新娘的视频相亲软件需要哪些技术支持
  • ¥15 stata安慰剂检验作图但是真实值不出现在图上
  • ¥15 c程序不知道为什么得不到结果
  • ¥40 复杂的限制性的商函数处理
  • ¥15 程序不包含适用于入口点的静态Main方法
  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位，为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来