CODEWITHSUNDEEP
jqueryclasshyperlinkhighlight
Maverick
Maverick

Reputation: 1123

Hide dynamically highlighted element with class via jQuery

So basically I have a few links, when you click one, it should add the highlighted class. I also have a button that when clicked should hide the link with the highlighted class.

This seems trivial and should be very simple, but I can't understand why my code does not work. Another thing, is for some reason, the links still go through once clicked in the fiddle. Not sure if it's something with jsfiddle and how it handles external links?

Here is my fiddle: http://jsfiddle.net/ZPGe7/1/

Upvotes: 0

Views: 111

Answers (1)

Rob W
Rob W

Reputation: 349042

You should not cache the jQuery object, because it doesn't update when the elements receive different class names. Also, use event.preventDefault() to prevent the link from being followed. Directly use $('.links a.highlight') in your code.

Fiddle: http://jsfiddle.net/ZPGe7/2/

$(function() {
    $('.links a').live('click',function(ev){
            $('.links a.highlight').removeClass('highlight');
            $(this).addClass('highlight');
            ev.preventDefault(); //Prevent link from being followed
    });
    $('#submit').live('click',function(){
        $('.links a.highlight').hide();
    });
});

Upvotes: 1

Related Questions