jquery点击链接时突出​​显示链接

Question

我点击它时如何使用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> 

也许我无法解释我的问题清楚，我的意思是最后的onclick链接使其

颜色以红色和另一个链接设置为那里默认颜色

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

认为这应该做它，虽然我现在手边没有jquery。假设“上”是一类，让你的链接红色：

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

Answer 3

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

Answer 4

它使用CSS是可能的，没有jQuery的要求：

亮点：

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

更改链接的颜色：

a:active { 
    color: #FF0000; 
} 

编辑：响应您的评论......如果你的链接如果不将浏览器导向另一个页面，则可以使用Mike Robinson's answer来实现相同的效果，而无需离开页面并且不会将颜色更改回默认的onblur。

Answer 5

您可以使用CSS伪类活动。它为被激活的元素添加了特殊的风格。

例如，你可以这样做：

a: active { color: red; } 

要小心，一：active必须出现在a：悬停在CSS定义，以便有效！

Answer 6

这应该工作：

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

其更好地ü se toggleClass（2合1）代替addClass/removeClass。

Answer 7

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