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

}); 

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

}); 

• javascript
• jquery
• html
• class
• onclick

3 Answers 3

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/TVms6/

Check out this http://api.jquery./toggleClass/

$("#menu li a").click(function (){
   $(this).toggleClass('inactive')
});

This is not the remended way of doing stuff these days. While onclick() will work for you, it doesn't quite fit into the unobtrusive policy that people tend to follow with JavaScript these days. Read the description at Wikipedia.

What you should be doing is something like

$('selector').click(function(){
//the action that you want to perform
});

You can assign an id to your anchor tag to be able to easily target it.

In my opinion its best to learn the correct way while you start learning itself, that way it bees more of a habit from early on.