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

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

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 3

Looks like the correct answer is already posted.
Just wanted to let you know that the selector "#menu li" will return ALL li elements that descend from #menu. Your code assumes that only direct decedents will be returned.

Answer 4

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

This should work:

JS:
$(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 7

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