求助：使用CSS与jQuery实现按钮颜色切换功能的技术问题

核心思路 #

用CSS类管理按钮的激活状态（蓝色），通过统一的点击事件逻辑处理「切换颜色」和「唯一激活」的需求，比直接操作css()属性更易维护和扩展。

修改后的完整代码 #

CSS 部分

.btn {
    background-color: green;
    /* 可选：添加基础样式让按钮更美观 */
    border: none;
    padding: 8px 16px;
    margin: 0 4px;
    cursor: pointer;
}
.btn.active {
    background-color: blue;
}

JavaScript 部分

$(document).ready(function () {
    $('.btn').click(function() {
        // 判断当前按钮是否处于激活状态
        const isActive = $(this).hasClass('active');
        
        // 移除所有按钮的激活状态
        $('.btn').removeClass('active');
        
        // 若当前按钮未激活，则添加激活类；已激活则保持移除（恢复绿色）
        if (!isActive) {
            $(this).addClass('active');
        }
    });
});

HTML 部分

<!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">
    <link rel="stylesheet" href="/styles.css">
    <title>Document</title>
</head>
<body>
    <button id="btn1" class="btn">Button</button>
    <button id="btn2" class="btn">Button</button>
    <!-- 后续新增按钮只需添加btn类即可，无需修改JS -->
    <script src="/jquery-3.6.1.min.js"></script>
    <script src="/index.js"></script>
</body>
</html>

原代码问题说明 #

你之前的代码每次点击都会强制把所有按钮设为绿色，再将当前按钮设为蓝色，完全忽略了「当前按钮是否已经是蓝色」的判断，因此无法实现再次点击恢复绿色的效果。通过类状态的判断和切换，就能完美覆盖三个需求：

1. 初始无active类，按钮默认绿色
2. 点击已激活的按钮时，移除active类恢复绿色
3. 点击未激活的按钮时，先清空所有激活状态，再给当前按钮添加active类，保证同一时间只有一个蓝色按钮

内容的提问来源于stack exchange，提问作者Tanmay Patel