Tab点击切换背景色正常，但图标（图片）颜色切换异常求助

嘿，我之前也碰到过一模一样的问题！既然你已经搞定了Tab背景色的切换，那图标颜色的问题其实核心就是给激活状态的Tab绑定专属样式类，然后针对这个类下的图标做颜色控制。下面给你几个实用的解决方案，按需选就行：

如果你的图标是SVG或者字体图标（比如Font Awesome），直接用CSS就能控制颜色，步骤超简单：

首先，你的HTML结构大概是这样（举个SVG的例子）：

<div class="tab-group">
  <div class="tab active">
    <svg class="tab-icon" viewBox="0 0 24 24">
      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
    </svg>
    <span>首页</span>
  </div>
  <div class="tab">
    <svg class="tab-icon" viewBox="0 0 24 24">
      <path d="M19 3h-1V2c0-.55-.45-1-1-1s-1 .45-1 1v1H8V2c0-.55-.45-1-1-1s-1 .45-1 1v1H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm0 16H5V8h14v11zm-4-7h-4v-2h4v2zm-4-4h-4V7h4v2z"/>
    </svg>
    <span>我的</span>
  </div>
</div>

然后写CSS，核心是通过.active类控制图标颜色：

/* 基础Tab样式 */
.tab {
  background-color: white;
  padding: 8px 16px;
  cursor: pointer;
  /* 其他布局样式：flex、gap这些按需加 */
}

/* 激活状态的Tab背景 */
.tab.active {
  background-color: red;
}

/* 未激活时图标颜色：红色 */
.tab-icon {
  fill: red; /* SVG用fill，字体图标用color */
  width: 24px;
  height: 24px;
}

/* 激活状态下图标颜色：白色 */
.tab.active .tab-icon {
  fill: white; /* 字体图标这里改成color: white; */
}

如果你的图标是位图，没法直接改颜色，那可以准备两张图（红色未激活、白色激活），通过切换背景图实现：

HTML结构：

<div class="tab-group">
  <div class="tab active">
    <div class="tab-icon home-icon"></div>
    <span>首页</span>
  </div>
  <div class="tab">
    <div class="tab-icon profile-icon"></div>
    <span>我的</span>
  </div>
</div>

CSS样式：

.tab {
  background-color: white;
  padding: 8px 16px;
  cursor: pointer;
}

.tab.active {
  background-color: red;
}

.tab-icon {
  width: 24px;
  height: 24px;
  background-size: cover;
}

/* 未激活状态的图标 */
.home-icon {
  background-image: url('home-red.png');
}
.profile-icon {
  background-image: url('profile-red.png');
}

/* 激活状态的图标 */
.tab.active .home-icon {
  background-image: url('home-white.png');
}
.tab.active .profile-icon {
  background-image: url('profile-white.png');
}

要是想优化性能，还可以把两个状态的图标拼成一张雪碧图，通过background-position切换，减少HTTP请求~

如果不想改图或者调整SVG，也可以用滤镜把红色图标转成白色，不过这个方法只适合纯色图标：

.tab.active .tab-icon {
  /* 先把图标变成黑色，再反转成白色 */
  filter: brightness(0) invert(1);
}

注意：如果图标有渐变或者复杂色彩，这个方法会出问题，只适合紧急情况用。

既然你已经实现了背景色切换，那应该已经有给Tab加/移除active类的JS代码，确保逻辑是对的：

const tabs = document.querySelectorAll('.tab');
tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // 先移除所有Tab的active类
    tabs.forEach(item => item.classList.remove('active'));
    // 给当前点击的Tab加上active类
    tab.classList.add('active');
  });
});

只要active类能正确切换，上面的样式就能生效啦！

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