如何实现按钮点击变色，切换按钮时恢复原按钮默认白色

以下是可以直接运行的实现方案，逻辑简单清晰，解决你遇到的按钮颜色切换问题：

HTML 结构 #

先搭建基础的导航按钮和对应区块结构，给所有导航按钮统一加一个类名方便批量操作：

<nav>
  <button class="nav-btn active">首页</button>
  <button class="nav-btn">产品</button>
  <button class="nav-btn">关于我们</button>
  <button class="nav-btn">联系我们</button>
</nav>

<section id="home">首页内容</section>
<section id="products">产品内容</section>
<section id="about">关于我们内容</section>
<section id="contact">联系我们内容</section>

CSS 样式 #

定义按钮默认样式和高亮状态的样式，这里用.active类标记当前选中的按钮：

.nav-btn {
  background-color: white;
  border: none;
  padding: 8px 16px;
  margin: 0 4px;
  cursor: pointer;
  transition: background-color 0.2s; /* 加个过渡动画更丝滑 */
}

.nav-btn.active {
  background-color: #2196F3; /* 选中时的蓝色，可自行修改 */
  color: white;
}

JavaScript 逻辑 #

核心思路是：点击任意按钮时，先移除所有按钮的高亮类，再给当前点击的按钮添加高亮类：

// 获取所有导航按钮
const navButtons = document.querySelectorAll('.nav-btn');

// 给每个按钮绑定点击事件
navButtons.forEach(button => {
  button.addEventListener('click', () => {
    // 移除所有按钮的active类
    navButtons.forEach(btn => btn.classList.remove('active'));
    // 给当前点击的按钮添加active类
    button.classList.add('active');
    
    // 如果需要同时滚动到对应区块，可以加上下面这段
    const targetId = button.textContent.toLowerCase(); // 假设按钮文本对应section的id，可根据实际调整
    document.getElementById(targetId).scrollIntoView({ behavior: 'smooth' });
  });
});

关键说明 #

• 统一使用.nav-btn类选择所有按钮，避免逐个操作元素，代码更易维护
• 每次点击时先清空所有按钮的高亮状态，再单独标记当前按钮，确保同一时间只有一个按钮处于高亮
• 可选的平滑滚动代码可以让页面自动跳转到对应区块，符合导航按钮的常规需求

内容的提问来源于stack exchange，提问作者Mitko.Vtori