jquery highlight the link when clicked

问题

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

回答1:

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.

回答2:

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');
});

回答3:

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.

回答4:

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.

回答5:

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

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

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

来源：https://stackoverflow.com/questions/813046/jquery-highlight-the-link-when-clicked