I have created 3 links which when hovered over fade, I have also added a click event that when clicked adds the class 'active' and then i want to remove the class when clicked again. I have read a few posts that seem to suggest 开发者_JAVA百科that removeClass come before addClass but im not sure why. Also when I click the link and the addClass is implemented I would also like to disable the fadeTo on this?

If anyone could explain each of these processes that would be great as Im trying to learn jQuery.

Code is here http://jsfiddle.net/kyllle/FtUdN/

Try this for the click:

        $('#nav li a').click(function(){
            $(this).toggleClass('active')
        }); 

Fiddle: http://jsfiddle.net/maniator/FtUdN/3/

Click here to see a working demo: http://jsfiddle.net/rVhte/

$('#nav li a').toggle(

function() {
    $('.active').removeClass('active');
    $(this).addClass('active');
    $("#nav li a").unbind('mouseenter mouseleave');


}, function() {
    $(this).removeClass('active');
    $('#nav li a').hover(function() {
    $(this).fadeTo(200, 0.5).end();
}, function() {
    $(this).fadeTo(200, 1.0).end();
});


});

Edit: disabled mouseover events after a link is clicked

You can use the .toggleClass method. In your hover handlers, you can use the hasClass method to check if you should fade or not.

Updated fiddle: http://jsfiddle.net/rfvgyhn/FtUdN/13/