使用jQuery动态更改图像

我有一组带有文本和图标的选项卡。活动选项卡的背景为白色，带有蓝色文本和图标。其他选项卡则相反。我想做的只是在图标处于活动状态时动态更改图标。蓝色图标可以工作，但在不活动时不会变为白色

以下是我所拥有的：

if ($('#project_details').hasClass('active')) {
    $('#tab1').attr('src','img/blue.png');
} else {
    $('#tab1').attr('src','img/white.png');
}

HTML:

项目详情

浏览器已经自动添加了

活动的

类，并将其从元素中删除，这是因为它是一个css伪类。您更改src属性的代码看起来不错，但我没有看到任何会触发代码运行的东西。（注意：这是对之前的回答的回应，该回答告诉OP手动添加/删除

active

。）

---

您希望何时执行此if语句？当用户单击另一个选项卡时？如果是这样，我将使用jQuery为选项卡的单击事件创建一个事件处理程序。

代码看起来不错，我只是想知道是什么事件触发代码执行？您需要1）使用CSS和背景图像，这不依赖于事件，或者2）共享您用于选项卡的机制，以便我们可以帮助构建事件回调。我正在使用用于选项卡的引导jquery（）我尝试了一个

。on（'click'）

，但它不起作用。这就是您所指的吗？事实上，我建议您确定一个对选项卡进行分组的通用元素，例如父

ul

元素。您可以创建一个选择器，例如$（'ulli'）。在（'click'，函数（e）{//code}）上；因此，在

ul

中点击

li

将触发一个代码块。

<li id="project_details" class="active">
<img src="" id="tab1">Project Details</li>