点击时jquery突出显示链接答案

【问题标题】：jquery highlight the link when clicked点击时jquery突出显示链接
【发布时间】：2010-10-23 05:15:42
【问题描述】：

点击链接时如何使用jquery高亮显示？

例如，当我点击链接 class1_1 时，我想让这个链接变成红色（或其他颜色）。

这里的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>

这里的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>

也许我无法清楚地解释我的问题，我的意思是最后一个点击链接是否成功

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

【问题讨论】：

标签： jquery highlight

【解决方案1】：

可以使用 CSS，不需要 jQuery：

亮点：

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

更改链接颜色：

a:active {
    color: #FF0000;
}

编辑：回复您的评论...如果您的链接没有将浏览器定向到另一个页面，您可以使用Mike Robinson's answer 来实现相同的效果，而无需离开页面，也无需将颜色更改回默认的 onblur。

【讨论】：

如果使用 a:active,onblur 颜色会消失

【解决方案2】：

认为应该这样做，尽管我现在手头没有 jquery。假设 'up' 是一个让你的链接变红的类：

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

【讨论】：

【解决方案3】：

这应该可行：

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>

最好使用 toggleClass（2 合 1）而不是 addClass/removeClass。

【讨论】：

但是如果有两个以上的链接，例如一些文字 some text too some text too1 ...如果单击“some text too”如何将“some text”颜色重置为它的默认颜色？有什么想法吗？

【解决方案4】：

我会推荐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】：

您可以使用 CSS 伪类 active 来实现。它为激活的元素添加特殊样式。

例如你可以这样做：

a: active { color: red; }

注意，a:active 必须在 CSS 定义中的 a:hover 之后才能生效！！

【讨论】：