CODEWITHSUNDEEP
jqueryclass
chowwy
chowwy

Reputation: 1126

jquery add active class multiple classes with other jquery

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;
 }

Upvotes: 0

Views: 2065

Answers (1)

Anders Arpi
Anders Arpi

Reputation: 8417

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.

Upvotes: 2

Related Questions