Javascript 单击时更改图标，然后下次单击时还原为原始图标

我有一组标签，当你点击其中一个时，背景颜色变为红色。如果未单击选项卡，则背景为白色。每个选项卡中都有一个图标，如果单击该选项卡，则图标颜色为白色；如果未单击该选项卡，则图标颜色为红色。我很难在单击或不单击选项卡时将图标更改为正确的颜色。顺便说一下，图标是图像

这就是我目前所拥有的。我可以改变背景颜色，但不确定如何切换图像。活动选项卡类控制背景颜色

如果$'.tab容器'.length>0{ $'.tab a'。单击，函数E{ $'.tab'.removeClass'active-tab'； $this.parent.addClass'active-tab'； $this.find'img'。attr'src'，'https://img-21.ccm2.net/1-NtiXuJNqGFChdD_IIpOnM9aOA=/200x/31027358c0f24fd3bd484a485b5a652c/ccm-faq/1538-9tLde1xY3nSyajQH-s-.png'； }; } img{ 宽度：48px } 如果$'.tab容器'.length>0{ $'.tab img'。单击，函数E{ $'.tab图标'.toggleClass'active-tab' }; } .活动选项卡{ 内容：urlhttps://n6-img-fp.akamaized.net/icones-gratis/inicio-icone-silhouette_318-85097.jpg?size=338c&ext=jpg; }

---

您可以检查父级是否有“类活动”选项卡，如果是，请更改图像，然后删除该类。 这个答案只是对逻辑的一个帮助，也许你需要根据自己的需要进行改变，但这是一种遵循的方式。 看一下这个片段

如果$'.tab容器'.length>0{ $'.tab a'。单击，函数E{ var myPath=； 如果$'.tab'.hasClass'active-tab'{ myPath=https://n6-img-fp.akamaized.net/icones-gratis/inicio-icone-silhouette_318-85097.jpg?size=338c&ext=jpg'; $'.tab'.removeClass'active-tab'； }否则{ myPath=https://img-21.ccm2.net/1-NtiXuJNqGFChdD_IIpOnM9aOA=/200x/31027358c0f24fd3bd484a485b5a652c/ccm-faq/1538-9tLde1xY3nSyajQH-s-.png'； $'.tab'.addClass'active-tab'； } $this.find'img'.attr'src'，myPath； }; } img{ 宽度：48px }

---

相反，我建议在img标签上使用css，当它被点击时，颜色会改变，而不改变实际的图像源，但是会有一些浏览器兼容性问题

适用于悬停的示例：

身体{ 背景：444人； } .广场{ 宽度：10雷姆； 高度：10雷姆； 背景：fff； 显示：块； } .square:悬停{ 滤光片：亮度0.35深褐色1 色调旋转310度饱和7； }

---

OP想点击，他也想改变图片，如果你想提出建议，在评论中这样做。我以悬停为例。他显然已经知道如何添加类来修改样式。他在问题中还说，当点击标签时，我很难将图标更改为正确的颜色，而不是他想更改图像。我正在为他的问题提供解决方案；这可能不是他期望的解决方案，因为我没有更改img src，但它仍然是一个有效的解决方案。我借用了你的图像URL，希望这是好的。好的，它不是我的，它来自谷歌…：另外，我建议使用相同的图片进行编辑