Question

I’m working on a menu which animates each li’s padding and color properties on mouseover and mouseout, and I wanted to stop the animations and color changes by changing the link’s class. So far, I’ve assigned the animations to stick with a.inactive, and wanted to change the class to a.active through an onclick event. So far, I’ve found some helpful resources on this site which I’ll paste below.

$("#menu li a").click(function (){
if (!$(this).hasClass("inactive")) {
$("a.inactive").removeClass("inactive");
$(this).addClass("active");
}
});

The code above seems to be the ticket, but being a total noob to javascript, I’m having trouble creating a function out of it that can be executed via onClick. Here’s the html:

<ul id="menu">
                <li class="landscape-architecture"><a class="inactive" href="#project1" onclick="changeClass();"><span class="menu_year">2006/</span>AQUEOUS PLAN</a></li>

Any help would be greatly appreciated. Thanks!

EDIT – Since the code you all have provided below should work but does not, I’ve gone ahead and put in the code for the mouseover/mouseout animations to see if for some strange reason there would be a conflict:

    $('#menu li').click(function () {   
    window.location = $(this).find('a').attr('href')

}).mouseover(function (){

    $(this).find('a.inactive')
    .animate( { paddingLeft: padLeft, paddingRight: padRight}, { queue:false, duration:100 } )
    .animate( { backgroundColor: colorOver }, { queue:false, duration:200 });

}).mouseout(function () {

    $(this).find('a.inactive')
    .animate( { paddingLeft: defpadLeft, paddingRight: defpadRight}, { queue:false, duration:100 } )
    .animate( { backgroundColor: colorOut }, { queue:false, duration:200 });

}); 

Answer 1

The above code works for you? Assuming you have a jQuery library loaded in your file, after changing your second line to:

if ($(this).hasClass("inactive")) {

It seems to work fine! The function you have there will run whenever the specified <a> element is clicked. You don’t even need the onclick element in the HTML.

If however you do want to utilize the onclick element and turn your current code into a function that may be able to be used elsewhere, you could do something like:

function change_class() {
    if ($(this).hasClass("inactive")) {
        $(this).removeClass("inactive").addClass("active");
    }
});

And use onclick="change_class()" in your HTML.

Here’s a JSFiddle to test with: http://jsfiddle.net/TVms6/