CODEWITHSUNDEEP
jqueryhtml
Professor B
Professor B

Reputation: 53

Dynamically change image with jQuery

I have set of tabs with text and icons. The active tabs have a white background with blue text and icons. The other tabs are the opposite. What I want to do is simply dynamically change the icons when they are active. The blue icon works, but doesn't change to white when not active.

Here's what I have:

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

HTML:

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

Upvotes: 0

Views: 627

Answers (1)

fpsColton
fpsColton

Reputation: 873

The active class is already added and removed from the element automatically by the browser, this is because it's a css pseudo-class. Your code to change the src attribute looks fine, but I don't see anything which would trigger your code to run. (Note: this is a response to previous answers telling OP to add/remove active manually.)

When exactly do you want this if statement to execute? When a user clicks on another tab? If so, I would use jQuery to create an event handler for the click event of a tab.

Upvotes: 1

Related Questions