jquery add active class multiple classes with other jquery

Question

How do I add an active class using jquery to menu elements with multiple classes? So far, my code below doesn't work:

JQUERY

$('#foo_menu li a').click(function(){  
    $('#foo_menu li a').removeClass('menucolor');
    $(this).addClass('menucolor');
});

HTML

<ul id="foo_menu">
<li><a href="/fooA" class="fooa qtipmenu menucolor" id="foo_A"></a></li>
<li><a href="/fooB" class="foob qtipmenu" id="foo_B"></a></li>
<li><a href="/fooB" class="fooc qtipmenu" id="foo_C"></a></li>
</ul>

Note: the qtipmenu class creates popups with jquery - http://craigsworks.com/projects/qtip2/); not sure if this is conflicting with the jquery script above

CSS

#menu li a.fooa {
    background-image: url(/images/foo_a.png);
    height: 20px;
    width: 20px;
}
#menu li a.menucolor {
    background-position: left bottom;
    height: 20px;
    width: 20px;
 }

Your jQuery code should work fine for setting the click on `` tag to have the class `menucolor`. What exactly is the problem? — jfriend00, Jan 23 '12 at 14:40
@jfriend00 It works elsewhere on the site, but not for this menu. I'm wondering if it's because each menu item has a separate class (for an image menu) and also shares a class (for the pop-up menu). — chowwy, Jan 23 '12 at 15:06
`addClass()` and `removeClass()` work just fine when there are multiple classes - they are designed for that so that is not the problem. Is there any possibility that you have either repeated an id in the page so that it occurs more than once or that you're running your jQuery code before the objects in the page that they refer to have been built? — jfriend00, Jan 23 '12 at 15:09
@jfriend00 Thanks, no other ids on the page. Will check how jQuery is running. — chowwy, Jan 23 '12 at 15:17

score 2 · Accepted Answer · answered Jan 23 '12 at 15:10

2

As demonstrated in this jsfiddle you can see that your code is working fine. (I changed the selector to remove the menucolor class though, but that doesn't matter).

Your problem almost definitely lies elsewhere.

The removeClass and addClass functions work no matter the number of classes.

answered Jan 23 '12 at 15:10

Anders Arpi

8,277
3
33
49

Actually, you did 2 things that helped: you had click(function(e) -- I had click(function(), without the e and the e.preventDefault(). Now I'm getting the active class to toggle. But the preventDefault won't let me load the page--and the add class function doesn't work without the prevDef – chowwy Jan 23 '12 at 15:25
Oh! That explains it. I figured your links wouldn't reload the page and that you wanted them to fire normally. Well then - joy for all! – Anders Arpi Jan 23 '12 at 15:26
One little issue: the active class on the menu is working great, but the preventDefault won't let the pages load. And without the prevDef, the active class on the menu isn't working, but the pages load. Any thoughts on why this might be happening? – chowwy Jan 23 '12 at 15:31
Hmm. Well, preventDefault does exactly this - it blocks e.g. clicked links from doing their default behaviour, in this case loading a new page. Now the JSFiddle example works if you remove the preventDefault line - that is the links become the correct color, BUT it also tries to load the link (which doesn't work in jsfiddle, obviously). If you give me some more HTML context I could try to understand exactly what you're trying to achieve. – Anders Arpi Jan 23 '12 at 15:35
Thanks for this. I've updated my CSS so you can see what the menucolor class looks like (it's for a sprite menu). Basically everything works fine with the add/remove class as long as the page doesn't reload. When it does reload, it goes wrong. I have a couple of css files and several jquery files. I've experimented with the order of the files, but so far it still doesn't work. There really isn't much more to the HTML in the header, other than a logo. – chowwy Jan 23 '12 at 16:20
1

Okay, solved the remaining issue using this answer: http://stackoverflow.com/questions/4866284/jquery-add-class-active-on-menu. If anyone is unable to get this to work even with good code, this other option may help. – chowwy Jan 23 '12 at 17:11

jquery add active class multiple classes with other jquery

1 Answers1