Fonction de survol et de clic jQuery

Question

J'ai 4 liens qui modifient la position de 4 divs dans une page Web. J'utilise le script jQuery suivant pour changer la couleur des liens lorsque je les survole.

$('a.menua').hover(function(){ 
    $(this).css({'color':'#2EC7C7'}); 
}, 
function(){ 
    $(this).css({'color':'white'}); 
}); 

Comment puis-je modifier ce script de sorte que lorsque je clique sur un lien, il conserve la couleur de vol stationnaire et ne change pas quand je prends ma souris hors de celui-ci?

$('a.menua').click(function(){ 
    //content 
}); 

Answer 1

Je voudrais utiliser CSS pour tous le style, comme ceci:

a.menua { color: white; } 
a.menua:hover, a.menua.clicked { color: #2EC7C7; } 

Alors seulement utiliser jQuery simplement basculer cette classe en utilisant .toggleClass() comme ceci:

$('a.menua').click(function(){ 
    $(this).toggleClass('clicked'); 
}); 

Ou, si vous voulez un seul actif à la fois:

$('a.menua').click(function(){ 
    $('a.menua').removeClass('clicked'); 
    $(this).addClass('clicked'); 
}); 

Cela rend votre code plus simple, plus léger, et plus facile à entretenir. En outre, il conserve vos informations de style où (si possible) il appartient, dans le CSS.

Answer 2

Ajouter une classe après un clic.

css

.somecolor {color:#2EC7C7} 

js

$('a.menua').click(function(){ 
    var $this = $(this); 
    if($this.hasClass("somecolor")){ 
     $(this).removeClass("somecolor"); 
    }else{ 
     $(this).addClass("somecolor"); 
    } 
}); 

$('a.menua').hover(function(){ 
    $(this).css({'color':'#2EC7C7'}); 
}, 
function(){ 
    $(this).css({'color':'inherit'}); 
}); 

Answer 3

Je ne l'ai pas testé, mais cela pourrait fonctionner:

$('a.menua').click(function(){ 
    $('a.menua').unbind('mouseleave'); 
}); 

Answer 4

utilisation element.Data:

$('a.menua').hover(function(){ 
    $(this).css({'color':'#2EC7C7'}); 
}, function(){ 
    if($(this).data("is-clicked") === false){ 
     $(this).css({'color':'white'}); 
    } 
}).live("click", function(){ 
    $(this).data("is-clicked", !$(this).data("is-clicked")); 
});; 

Mais Nicks version est probablement css la meilleure façon de procéder.

Answer 5

Je pense que vous voulez ceci: live solution

Donc, j'utilise jQuery pour ajouter des classes aux liens. J'ai également défini le script pour laisser un seul élément actif à la fois (c'est la principale différence entre cette solution et celle de Nick).

mise à jour:

L'effet planant est maintenant CSS basée (C'est ce que la classe: hover pseudo est pour). Vous n'utilisez donc jQuery que pour définir l'état "actif" du lien.

HTML:

<a class="menulink" href="#">Link 1</a> 
<a class="menulink" href="#">Link 2</a> 
<a class="menulink" href="#">Link 3</a> 

CSS:

a { color: #00f; } 
a:hover, a.active { color: #f00; } 

JS:

$('.menulink').click(function(){ 
$(this).addClass("active").siblings().removeClass("active"); 
}); 

Answer 6

La seule partie qui devrait exiger JS i s pour que le lien conserve la même couleur après avoir enlevé la souris. CSS seul vous permettra de contrôler de quelle couleur il a lorsque vous planez (avec a:hover) et pendant le clic de la souris (avec a:active).

La suggestion de Craver d'ajouter une classe avec jQuery devrait prendre soin de garder la couleur après votre départ, et comme il l'a dit, il est bon de conserver les informations de style dans votre CSS.

Si vous utilisez les quatre styles de liens possibles, assurez-vous de les mettre dans cet ordre:

a:link { } 
a:visited { } 
a:hover { } 
a:active { } 

Vous pouvez en souvenir BONS BAISERS détestez - Link, visité, Hover, Active. Une autre pensée - vous essayez de rendre la couleur de lien identique pendant le vol stationnaire et cliquez. Je suggère qu'il pourrait être préférable de les laisser être un peu différent. Avoir le changement de couleur pendant le clic donne à l'utilisateur une rétroaction visuelle sur la cible.

Answer 7

js:

var link='null'; 
$('a.menua').click(function(){ 
    $(link).removeClass('clicked'); 
     $(this).addClass('clicked'); 
    link=$(this); 

css:

a.menua { 
    color: white; 
    text-decoration:none; 
} 
a.menua:hover, a.menua.clicked { 
    color: #2EC7C7; 
}