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>