Changing background of link when clicked using jQuery

Question

I have 4 links with background color that I need to be changed when I click, I use this code to change the background :

jQuery:

$(document).ready(function() {
  $('#content_area').load($('.pm_class:first').attr('href'));

  $('.pm_class').click(function() {
    var href = $(this).attr('href');
    $(this).css('background-color', '#3B581E');
    $(this).css('color', '#fff');
    $('#content_area').hide().load(href).fadeIn('normal');
    return false;
  });
});

The issue is: when I click a different link the css in my jQuery is still applied to the previous link I clicked along with the second one. I need the first to return to the original state as shown in the image below. I need it to return back to be like the "send message" and "archive" links :

jQuery issue

your picture does not work as well

Eric Yin
– Eric Yin

2012-01-16 11:17:39 +00:00
Commented Jan 16, 2012 at 11:17 — Eric Yin
– Eric Yin, Commented Jan 16, 2012 at 11:17

James Allardice · Accepted Answer · 2012-01-16 11:18:29Z

1

You could change the style of all .pm_class elements back to the original, and then change the styles of this to the new style:

$('.pm_class').click(function() {
    var href = $(this).attr('href');
    $(".pm_class").css({
        backgroundColor: "oldColor",
        color: "oldColor"
    });
    $(this).css({
        backgroundColor: "#3B581E",
        color: "#fff"
    });
    $('#content_area').hide().load(href).fadeIn('normal');
    return false;
});

Note that I've consolidated your calls to the css method into one, as it will accept an object representing a map of CSS properties and values as an argument.

answered Jan 16, 2012 at 11:18

James Allardice

166k22 gold badges335 silver badges316 bronze badges

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

Comments

wholerabbit · Accepted Answer · 2012-01-16 13:26:58Z

0

JS functions are objects, and can be assigned member variables. These work like what in some C like languages is called a "static" local variable, meaning it retains its value between invocations.

$('pm_class').click(function () { switchBG($(this)) });

function switchBG (elem) {
    if (switchBG.prev) {
        switchBG.prev.css('background', '#ffffff');
    }
    elem.css('background', '#ffff00');
    switchBG.prev = elem;
}

You could do the same thing with a global, but this is tidier.

edited Jan 16, 2012 at 13:26

answered Jan 16, 2012 at 11:38

wholerabbit

11.6k2 gold badges40 silver badges73 bronze badges

Collectives™ on Stack Overflow

Changing background of link when clicked using jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related