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).

The javascript code here:

<script type="text/javascript">
 $(function(){
  $("#menu li").each(function(){
     $(this).click(function(event){
       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>

The html code here:

<ul id="menu">

<li class="title"><span>class1 </span>
<ul>
  <li><a href="">class1_1</a></li>
   <li><a href="">class1_2</a></li>
 </ul>
 </li>
<li class="title"><span>class2</span>
   <ul>
  <li><span>class2_1</span>
   <ul>
    <li><a href="">class2_1_1</a></li>
    <li><a href="">class2_1_1</a></li>
  </ul>
  </li>
 </ul>
</li>
</ul>

maybe I can't explanation my question clearly,I mean is the last onclick link make it

color to red and another links set to there default color

Answer 1

<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 2

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.

Answer 3

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 4

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 5

I would recommend the http://plugins.jquery.com/project/color jquery.color plugin. It will allow you to animate color on all sorts of html elements.

Answer 6

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 7

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!!