点击菜单图标时如何切换img src，激活态变红、点击其他项恢复灰色

实现方案 #

方案一：纯CSS实现（无需JS，最简单） #

你使用的是Bootstrap的tab组件，切换时会自动给激活的<a>标签添加active类，直接利用这个类控制图标样式即可：

/* 所有tab图标默认设为灰色 */
.nav-tabs a img {
  filter: grayscale(100%);
  transition: all 0.2s;
}
/* 激活态tab下的图标调整为红色 */
.nav-tabs a.active img {
  filter: grayscale(0) brightness(0.8) sepia(1) saturate(5) hue-rotate(-50deg);
  /* 可以自行调整滤镜参数，直到和你需要的红色完全匹配 */
}

如果你的红色图标是单独设计的、无法通过滤镜调整得到，用下面的JS方案：

方案二：JS切换图片资源 #

首先确保所有红色图标命名和灰色图标对应，规则统一：灰色图标命名为xxx_grey.png，对应红色图标命名为xxx_red.png，放入同目录下即可。
不需要给每个img添加onclick事件，直接监听Bootstrap的tab切换事件即可：

document.addEventListener('DOMContentLoaded', function() {
  const tabs = document.querySelectorAll('.nav-tabs a[data-toggle="tab"]');
  
  // 初始化默认激活的图标为红色
  const activeTab = document.querySelector('.nav-tabs a.active');
  const activeImg = activeTab.querySelector('img');
  activeImg.src = activeImg.src.replace('_grey', '_red');

  // 监听tab切换事件
  tabs.forEach(tab => {
    tab.addEventListener('show.bs.tab', function() {
      // 所有图标重置为灰色
      tabs.forEach(t => {
        const img = t.querySelector('img');
        img.src = img.src.replace('_red', '_grey');
      });
      // 当前选中的图标设为红色
      const currentImg = this.querySelector('img');
      currentImg.src = currentImg.src.replace('_grey', '_red');
    });
  });
});

两种方案二选一即可，都可以实现你要的激活变红、切换后恢复灰色的效果。

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