jquery在单击时突出显示该链接

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

点击它时如何使用jquery突出显示链接?

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

例如,当我点击链接class1_1时,我想将此链接设为红色(或其他颜色)。

The javascript code here:

这里的javascript代码:

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

这里的HTML代码:

<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

也许我无法清楚地解释我的问题,我的意思是最后的onclick链接制作它

color to red and another links set to there default color

颜色为红色,另一个链接设置为默认颜色

7 个解决方案

#1

It's possible using CSS, no jQuery required:

可以使用CSS,不需要jQuery:

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.

编辑:回复您的评论...如果您的链接没有将浏览器指向另一个页面,您可以使用Mike Robinson的答案来完成相同的效果,而无需离开页面并且不将颜色更改回默认的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:

认为这应该这样做,虽然我现在手头没有jquery。假设'up'是一个让你的链接变红的课程:

$("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.

最好使用toggleClass(2合1)而不是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.

我会推荐http://plugins.jquery.com/project/color jquery.color插件。它将允许您在各种html元素上设置颜色动画。

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

您可以使用CSS伪类激活来完成它。它为激活元素添加了特殊样式。

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

小心,a:主动必须在a之后:将鼠标悬停在CSS定义中才能生效!