Dynamically change image with jQuery

Question

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>

Code looks fine, I'm just wondering what event triggers your code to execute? — fpsColton
– fpsColton, Commented Nov 19, 2014 at 18:03
You'll need to either 1) use CSS and background images instead, which doesn't rely on events, or 2) share what mechanism you're using for the tabs so we can help construct an event callback. — isherwood
– isherwood, Commented Nov 19, 2014 at 18:08
I am using the bootstrap jquery for tabs (getbootstrap.com/javascript/#tabs) — Professor B
– Professor B, Commented Nov 19, 2014 at 18:11

fpsColton · Accepted Answer · 2014-11-19 18:23:00Z

1

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.

edited Nov 19, 2014 at 18:23

answered Nov 19, 2014 at 18:13

fpsColton

8735 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Professor B Over a year ago

i tried an .on('click') but it didn't work. is that what you're referring to?

fpsColton Over a year ago

Indeed, I would reccomend you identify a common element which groups your tabs, such as the parent ul element. You can create a selector such as $('ul li').on('click', function(e){ //code }); So any click on a li inside your ul will trigger a block of code.

Collectives™ on Stack Overflow

Dynamically change image with jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related