Using onClick to change classes with javascript

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

});

drfranks3 · Accepted Answer · 2011-06-22 17:14:46Z

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/

edited Jun 22, 2011 at 17:14

answered Jun 22, 2011 at 17:09

drfranks3

6658 silver badges22 bronze badges

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

3 Comments

Luke Keller Over a year ago

I went to your JSFiddle test and saw that it worked there, but when I applied it to my site, it didn't =[. I've hosted a test version of what I have so far here: luke-keller.com/test/projects.html

drfranks3 Over a year ago

I saved your test file there and did some more edits. I believe if you put your code within the following, it should work: $(document).ready(function(){ /* Script Here */ });

Luke Keller Over a year ago

That did it D Franks!!!!!!!!!!!!!!!!!! You are my hero. And I believe that the other suggestions will work on my site as well. Thank you everyone!

Phil · Accepted Answer · 2011-06-22 17:14:18Z

1

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

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

answered Jun 22, 2011 at 17:14

Phil

4,2244 gold badges26 silver badges40 bronze badges

1 Comment

Luke Keller Over a year ago

Similar to the comment I made to Dave's response, I can't seem to get this to work. I've posted a link to a rough version of what I have so far - luke-keller.com/test/projects.html

nikhil · Accepted Answer · 2011-06-22 17:17:46Z

1

This is not the recommended 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 becomes more of a habit from early on.

answered Jun 22, 2011 at 17:17

nikhil

9,50622 gold badges64 silver badges103 bronze badges

Collectives™ on Stack Overflow

Using onClick to change classes with javascript

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related