Adding and Removing an active class

Question

I know this should be simple and has been covered a million times already but I just can;t seem to get it to work.

It's your basic script that makes the last link you clicked in a list become the 'active' link my adding the 'active' class to it.

HTML

<ul id="projectsList">
            <li><a href="#" class="activeProject" id="portoftyne">Port of Tyne</a></li>
            <li><a href="#" id="eaga">Eaga</a></li>
            <li><a href="#" id="gong">Gong</a></li>
            <li><a href="#" id="nufc">NUFC</a></li>
        </ul>

jQuery

    $(document).ready(function() {
    $('#projectsList a').click(function(){
         $('.activeProject').removeClass('activeProject')
         $(this).addClass("activeProject");
    });
});

Should work, doesn't at all.

EDIT Nothing wrong with this code, it works fine. There was a section of code above it in the document that was preventing it from working.

It works fine. See here: jsfiddle.net/cFGyt You must have other javascript that may be failing. — Victor
– Victor, Commented Feb 3, 2011 at 14:54
How are you testing the result? Perhaps the bug is in your CSS file so you're not getting visual feedback. — user113716
– user113716, Commented Feb 3, 2011 at 14:59

mihaimm · Accepted Answer · 2011-02-03 15:09:33Z

1

I strongly suggest using a variable to hold reference to activeProject. In case you have large pages this would save a lot on the processing as searching DOM can be expensive. It will also make it less prone to problems like the one you're having (selecting the wrong element).

$(document).ready(function() {
        var active = $('#projectsList a.activeProject');
        $('#projectsList a').click(function() {
            if(active) $(active).removeClass('activeProject');
            $(this).addClass("activeProject");
            active=this;
        });
    });

answered Feb 3, 2011 at 15:09

mihaimm

5212 silver badges6 bronze badges

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

Comments

Fender · Accepted Answer · 2011-02-03 14:55:13Z

0

i don't see any problem there.

look: http://jsfiddle.net/JqMK8/

it is working.

the mistake must be somewhere else

answered Feb 3, 2011 at 14:55

Fender

3,0551 gold badge19 silver badges25 bronze badges

1 Comment

Sam Over a year ago

Yeah, I missed a ; on the code just before it. Spent an hour looking at the wrong part :(

Blender · Accepted Answer · 2011-02-03 14:53:34Z

0

Try being more specific with the selector:

$(document).ready(function() {
    $('#projectsList li a').click(function(){
         $('.activeProject').removeClass('activeProject')
         $(this).addClass("activeProject");
    });
});

I'm not sure what's wrong. This code works for other people...

answered Feb 3, 2011 at 14:53

Blender

300k55 gold badges462 silver badges512 bronze badges

2 Comments

Sam Over a year ago

That was the first thing I tried. I thought being more general would help lol.

Blender Over a year ago

Well, the code looks correct. Could you post the entire page and JS file? Maybe check the CSS? There seems to be no problem.

Joko Wandiro · Accepted Answer · 2011-02-03 14:57:17Z

0

I try it and it works, nothing wrong in your code :

DEMO

answered Feb 3, 2011 at 14:57

Joko Wandiro

1,9972 gold badges18 silver badges29 bronze badges

2 Comments

Blender Over a year ago

I have never seen the salmon color used before (nor did I know of its existence)!

Joko Wandiro Over a year ago

i know it from the book (jr.com/new-riders-publishing/pe/NRP_0321574168). you can declare color in CSS with name of that color

madr · Accepted Answer · 2011-02-03 15:08:19Z

Perhaps the ID #projectsList is changed by your output processor? Could happen in .NET or certain Java frameworks.

Try to assign the class .projectsList instead and see if it works.

I could also recommend the practice of Event delegation instead:

$('.projectsList').click(function(evt){
  if ( evt.target.nodeName == 'A' ) {
    var elm = $(evt.target);
    if ( elm.hasClass('activeProject') ) { return; }
    $('.activeProject').removeClass('activeProject');
    $(evt.target).addClass('activeProject');
  }
});

(Simplified and quick written)

UPDATE Sam, I recommend JavaScript Lint if you haven't tried it. Using it online or in your editor(there is bundles and plugins for it) will let you easily spot errors and warnings in your JavaScript code.

Collectives™ on Stack Overflow

Adding and Removing an active class

5 Answers 5

Comments

1 Comment

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related