JavaScript实现按钮选中状态切换及样式还原

页面里放一排操作按钮，点某个要高亮，同时其他兄弟恢复默认，这种需求在导航、筛选、Tab 切换里都挺常见。原理不复杂，但刚上手写的时候，有人会只给当前按钮加样式，忘了把之前的清掉，结果好几个按钮同时亮着，线上跑起来问题就来了。

这里用统一 class 处理。HTML 放几个 button，都挂一个相同的类名，比如 button。这样批量操作的时候不用一个个去记 id，代码能少写点。

复制代码

<button class="button" id="button1">Button 1</button>
<button class="button" id="button2">Button 2</button>
<button class="button" id="button3">Button 3</button>

样式拆成两块。默认状态给个浅色背景，选中状态单独定义一个类，叫 selected，背景涂红------实际项目里按设计稿改色就行。

复制代码

.button {
    padding: 10px 20px;
    margin: 5px;
    background-color: #f0f0f0;
    border: none;
    cursor: pointer;
}
.selected {
    background-color: red;
}

JavaScript 逻辑的核心就两个动作：先清，后加。拿到所有按钮后，给每个绑 click。事件触发时，遍历一遍全部按钮，把 selected 类移除干净，然后再往当前点击的这个身上加。顺序反了就白清------自己刚加的类当场被抹掉，或者更糟，留着旧的没清干净。

复制代码

const buttons = document.querySelectorAll('.button');

buttons.forEach(button => {
    button.addEventListener('click', function() {
        buttons.forEach(btn => btn.classList.remove('selected'));
        this.classList.add('selected');
    });
});

完整代码拼起来，一个文件就能跑：

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Color Change</title>
    <style>
        .button {
            padding: 10px 20px;
            margin: 5px;
            background-color: #f0f0f0;
            border: none;
            cursor: pointer;
        }
        .selected {
            background-color: red;
        }
    </style>
</head>
<body>
    <button class="button" id="button1">Button 1</button>
    <button class="button" id="button2">Button 2</button>
    <button class="button" id="button3">Button 3</button>

    <script>
        const buttons = document.querySelectorAll('.button');

        buttons.forEach(button => {
            button.addEventListener('click', function() {
                buttons.forEach(btn => btn.classList.remove('selected'));
                this.classList.add('selected');
            });
        });
    </script>
</body>
</html>

这种方法够直接用很久。以后要加过渡动画或者改选中色，只动 CSS 里的 .selected，JS 那部分基本不用改，维护起来不费力。

按钮数量不多的情况下，循环清一遍的性能损耗可以忽略，先保证状态干净再说。

lcjmSSL将"免费"与"自动化"做到极致。普通用户同样享有通配符、多域名证书服务，自动域名验证免去手动麻烦，证书到期前自动重申并部署，彻底告别人工运维。