点击Anchor锚点时修改颜色？解决点击其他区域颜色复原问题

嗨，我来帮你搞定这个按钮样式的问题！你遇到的情况大概率是用了CSS的:focus伪类来实现点击后的颜色变化——当你点击页面其他区域时，按钮会失去焦点，:focus的样式就失效了，颜色自然就变回原样啦。要实现点击后持久保持高亮状态，我们可以用JavaScript配合CSS类来搞定，下面是完整的解决方案：

完整代码示例 #

HTML（按钮结构） #

<a href="#" class="button">按钮1</a>
<a href="#" class="button">按钮2</a>
<a href="#" class="button">按钮3</a>

CSS（样式定义） #

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  transition: background-color 0.3s; /* 加个过渡动画，颜色切换更丝滑 */
}

/* 点击后保持的高亮样式，你可以自定义颜色 */
.button.active {
  background-color: #ff9800;
}

JavaScript（逻辑控制） #

// 获取所有按钮元素
const buttons = document.querySelectorAll('.button');

// 给每个按钮绑定点击事件
buttons.forEach(button => {
  button.addEventListener('click', function(e) {
    // 阻止锚点默认的跳转行为（如果你的按钮不需要跳转链接，可以保留这行）
    e.preventDefault();
    
    // 先移除所有按钮的高亮类，确保只有当前点击的按钮高亮
    buttons.forEach(btn => btn.classList.remove('active'));
    
    // 给当前点击的按钮添加高亮类
    this.classList.add('active');
  });
});

额外需求：点击页面其他区域取消所有高亮 #

如果想要实现「点击其他区域时，所有按钮都恢复默认颜色」，只需要再添加一段监听页面点击的代码：

// 监听页面全局点击事件
document.addEventListener('click', function(e) {
  // 判断点击的目标不是按钮时，移除所有按钮的高亮类
  if (!e.target.classList.contains('button')) {
    buttons.forEach(btn => btn.classList.remove('active'));
  }
});

核心思路 #

我们不再依赖CSS的:focus（它依赖焦点状态，失去焦点就失效），而是用JavaScript手动控制一个持久的CSS类（active）来标记当前选中的按钮，这样就能完美解决点击其他区域样式恢复的问题啦。

内容的提问来源于stack exchange，提问作者Singh Amrinder Ghumman