jquery highlight the link when clicked

Question

How do I use jquery to highlight the link when I click on it?

For example, when I click on the link class1_1, I want to make this link red (or another color).

<

Answer 1

Think this should do it, although I don't have jquery on hand right now. Assumes 'up' is a class that makes your link red:

$("ul#menu a").click(function(){
 $(this).addClass('up');
});

Answer 2

This should work:

Javascript:

$(function(){
    $('.class1').click(function() {
        $(this).toggleClass('active1');
    });
});

CSS:

a.class1 { color: red; }
a.active1 { color: blue; }

HTML:

<a href="#" class="class1">some text</a>

Its better to use toggleClass (2 in 1) instead of addClass/removeClass.

Answer 3

Javascript:

$('.link').click(function() {
    if (!$(this).hasClass('hi')) {
        // If this link is not already highlighted, highlight it and make
        // sure other links of class .link are not highlighted.
        $('.hi').removeClass('hi');
        $(this).addClass('hi');
    }
});

css:

a.hi { color: red; }

html:

<a href="#" class="link">my text</a>
<a href="#" class="link">that text</a>
<a href="#" class="link">this text</a>

Answer 4

<script type = "text/javascript" >
$(function() {
    $("#menu li").each(function() {
        $(this).click(function(event) {

            $("#menu li").removeClass("high");
            $(this).addClass("high");

            var ul = $(this).children("ul")
            var span = $(this).children("span")
            if (ul.html() != null) {
                if (ul.css("display") == "none") {
                    ul.css("display", "block");
                    span.addClass("up")
                } else {
                    ul.css("display", "none") span.removeClass("up")
                }
                event.stopPropagation();
            } else {
                event.stopPropagation();
            }
        });
    });
    return false;
});
</script>


<style>
.high{color:red}
</style> 

Answer 5

You can do it using the CSS pseudo-class active. It adds special style to an activated element.

For example you can do this:

a: active { color: red; }

Be careful, a:active MUST come after a:hover in the CSS definition in order to be effective!!

Answer 6

It's possible using CSS, no jQuery required:

Highlight:

a:active {
    background-color: #FF0000;
}

Change link color:

a:active {
    color: #FF0000;
}

Edit: Responding to your comment... If your links are not directing the browser to another page, you can use Mike Robinson's answer to accomplish the same effect without leaving the page and without changing the color back to default onblur.