实现点击一个按钮时，使其变为激活状态，并且将其他处于激活状态的按钮恢复为默认状态实现点击一个按钮时，使其变为激活状态，并

实现点击一个按钮时，使其变为激活状态，并且将其他处于激活状态的按钮恢复为默认状态，可以修改 JavaScript 代码以在每次点击时遍历所有按钮，并重置它们的状态。以下是一个完整的示例：

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按钮颜色切换示例</title>
    <style>
        .button-group button {
            padding: 10px 20px;
            margin: 5px;
            border: 1px solid #ccc;
            background-color: #f0f0f0;
            cursor: pointer;
        }
        .active {
            background-color: #4CAF50; /* 按下按钮后的颜色 */
            color: white;
        }
    </style>
</head>
<body>
    <div class="button-group">
        <button type="button" onclick="setActive(this)">按钮 1</button>
        <button type="button" onclick="setActive(this)">按钮 2</button>
        <button type="button" onclick="setActive(this)">按钮 3</button>
        <button type="button" onclick="setActive(this)">按钮 4</button>
    </div>

    <script>
        function setActive(button) {
            // 获取所有按钮
            var buttons = document.querySelectorAll('.button-group button');
            // 遍历所有按钮，将其颜色恢复为默认状态
            buttons.forEach(function(btn) {
                btn.classList.remove('active');
            });
            // 将当前点击的按钮颜色设置为激活状态
            button.classList.add('active');
        }
    </script>
</body>
</html>

解释

HTML 部分:
- 按钮使用 type="button" 明确指定为普通按钮，避免其作为表单提交按钮。
- 每个按钮在点击时调用 setActive(this) 函数。
CSS 部分:
- .button-group button 设置按钮的基本样式。
- .active 类定义按钮在激活状态时的样式。
JavaScript 部分:
- setActive 函数首先获取所有按钮，然后遍历这些按钮，将所有按钮的 active 类移除。
- 最后，将 active 类添加到当前点击的按钮上，使其变为激活状态。

这样，每次点击一个按钮时，所有其他按钮都会恢复到默认状态，只有当前点击的按钮会变为激活状态。