图片按钮onclick事件修改：实现3个图片导航按钮激活态切换

嘿，这事儿很好解决！我给你分享两种不用background-image的实现方式，完全靠图片元素来做导航按钮的激活状态切换，刚好满足你的需求——只有当前激活的按钮显示红色版本：

方案一：纯HTML+CSS（适合静态激活状态或后端渲染场景） #

这个方案不需要JS，靠CSS类来控制图片的显示和隐藏，每个按钮里放两张图片（普通版+红色激活版）：

HTML结构 #

<div class="nav-buttons">
  <button class="nav-btn active">
    <img src="image1.png" alt="导航1" class="normal-img">
    <img src="image1-red.png" alt="导航1（激活）" class="active-img">
  </button>
  <button class="nav-btn">
    <img src="image2.png" alt="导航2" class="normal-img">
    <img src="image2-red.png" alt="导航2（激活）" class="active-img">
  </button>
  <button class="nav-btn">
    <img src="image3.png" alt="导航3" class="normal-img">
    <img src="image3-red.png" alt="导航3（激活）" class="active-img">
  </button>
</div>

CSS样式 #

.nav-buttons {
  display: flex; /* 横向排列按钮，可按需调整为其他布局 */
  gap: 10px;
}

.nav-btn {
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

/* 默认隐藏激活状态的图片 */
.active-img {
  display: none;
}

/* 当按钮有.active类时，切换图片显示状态 */
.nav-btn.active .normal-img {
  display: none;
}
.nav-btn.active .active-img {
  display: block;
}

说明：如果是后端渲染页面，只需要给当前激活的按钮加上active类就行；如果需要前端交互切换，再加几行JS绑定点击事件切换类即可（逻辑和方案二类似）。

方案二：JavaScript动态切换图片src（适合前端交互场景） #

这个方案每个按钮只需要一张图片元素，通过JS动态修改src属性来切换普通/红色版本，更节省DOM元素：

HTML结构 #

<div class="nav-buttons">
  <button class="nav-btn" data-normal-src="image1.png" data-active-src="image1-red.png">
    <img src="image1.png" alt="导航1">
  </button>
  <button class="nav-btn" data-normal-src="image2.png" data-active-src="image2-red.png">
    <img src="image2.png" alt="导航2">
  </button>
  <button class="nav-btn" data-normal-src="image3.png" data-active-src="image3-red.png">
    <img src="image3.png" alt="导航3">
  </button>
</div>

JavaScript代码 #

const navButtons = document.querySelectorAll('.nav-btn');

navButtons.forEach(btn => {
  btn.addEventListener('click', () => {
    // 先把所有按钮恢复成普通图片，并移除激活类
    navButtons.forEach(item => {
      const img = item.querySelector('img');
      img.src = item.dataset.normalSrc;
      item.classList.remove('active');
    });
    // 再把当前点击的按钮换成激活图片，并添加激活类
    const currentImg = btn.querySelector('img');
    currentImg.src = btn.dataset.activeSrc;
    btn.classList.add('active');
  });
});

可选CSS优化 #

可以给激活状态的按钮加个视觉标识，让用户更直观感知：

.nav-btn.active {
  border: 2px solid #e0e0e0; /* 示例样式，可按需调整 */
  border-radius: 4px;
}

两种方案都完全符合你的要求：不用background-image，只有当前激活的按钮显示红色图片，功能和常规导航菜单一致～

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