jQuery Correspondance d'URL pour les états de vol plané

Question

Je construis un site web qui a deux menus sur une page, chacun avec des liens identiques mais un menu est des images avec un état stationnaire et l'autre une liste. Ce dont j'ai besoin, c'est d'utiliser jQuery pour que chaque lien correspondant affiche un état de survol en même temps. Si vous passez la souris sur un élément du menu de liste, le lien avec la même URL dans le menu d'image doit également indiquer un état de survol. La seule chose que ces menus ont en commun est de faire correspondre les URL de sorte que c'est ce que jQuery devrait rechercher.

Ceci est la page: http://www.chaseandsorensen.com/shop

Answer 1

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

Je ne l'ai pas essayé ...

Et je n'ai pas idée de simuler l'effet de vol stationnaire, sauf en ajoutant la classe.

Answer 2

en utilisant la correspondance classnames, voici une façon:

.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'); 
});​ 

Démo: http://jsfiddle.net/yY44H/2/

Answer 3

Pour ceux qui cherchent une sollution Mootools:

$$('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'); 
     }); 
}); 

C'est le dernier message converti pour Mootools:

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

Après la division, vous pouvez utiliser [0] ou [1] dans les deux sens. Le premier exemple était d'éviter d'utiliser la scission.