雙懸停狀態的jQuery URL匹配

Question

我正在構建一個網站，在一個頁面上有兩個菜單，每個菜單都有相同的鏈接，但一個菜單是帶有懸停狀態的圖像，另一個菜單是列表。

我需要的是使用jQuery使每個對應的鏈接來同時顯示懸停狀態。

如果您在列表菜單中的某個項目上滾動，則圖像菜單中具有相同網址的鏈接也應顯示懸停狀態。

這些菜單唯一的共同點就是匹配url，這是jQuery需要查找的內容。

這是網頁：http://www.chaseandsorensen.com/shop

Answer 1

$(".imagemenu a").hover(function() { 
    current_url = this.href; 
    $(".menu").find("a[href=" + current_url + "]").addClass("hoverClass); 
}); 

我還沒有嘗試過...

而且我也沒有主意，模擬，只是加入了類懸停效果。

Answer 2

使用匹配的類別名稱，這裏有一個方法：

.highlight { border:1px solid red }​ 

​<a href="test.html" class="first">First</a> 
<a href="test2.html" class="second">Second</a> 
​<br /> 
<a href="test.html" class="first">First</a> 
<a href="test2.html" class="second">Second</a> 

$("a").hover(function() { 
    $('.' + $(this).attr('class')).addClass('highlight'); 
}, function() { 
    $('.' + $(this).attr('class').split(' ')[1]).removeClass('highlight'); 
});​ 

演示：http://jsfiddle.net/yY44H/2/

Answer 3

對於那些尋找一個MooTools的sollution：

$$('a').addEvent('mouseenter', function(e){ 
     var dual_link = $$('.'+this.get('class')); 
     dual_link.addClass('highlight'); 
     dual_link.addEvent('mouseleave', function(e){ 
      dual_link.removeClass('highlight'); 
     }); 
}); 

這是最後轉換爲MooTools的帖子：

$$('a').addEvents({ 
    mouseenter : function(e){ $$('.'+this.get('class')).addClass('highlight');}, 
    mouseleave : function(e){ 
     $$("."+this.get('class').split(" ")[0]).removeClass('highlight');} 
}); 

拆分後，您可以使用[0]或[1]以任何方式工作。第一個例子是避免使用拆分。