Comment ajouter et supprimer des classes avec jQuery?

Question

J'ai une liste ul avec un lien dans chaque li. Ma question est: comment puis-je supprimer la classe 'sélectionnée' d'un a (ancre) et l'appliquer à celui que je survole?

<ul> 
    <li><a href="" class="selected">Link 1</a></li> 
    <li><a href="">Link 2</a></li> 
    <li><a href="">Link 3</a></li> 
    <li><a href="">Link 4</a></li> 
    <li><a href="">Link 5</a></li> 
</ul> 

Answer 1

Commander le jquery api: http://api.jquery.com/

jQuery.addClass jQuery.removeClass

$("li").hover(
    function() { 
    $(this).addClass('selected'); 
    }, 
    function() { 
    $(this).removeClass('selected'); 
    } 
); 

Answer 2

Essayez ceci:

$("ul li a").hover(function(e){ 
    $("ul li a").removeClass("selected");  
    $(this).addClass("selected"); 
    e.preventDefault(); 
}); 

Vous retirez de toutes les balises sur a survolez-le puis ajoutez-le à celui sur lequel se trouve la souris.

Answer 3

vous devez écrire un sélecteur pour trouver le noeud à droite, puis utilisez la méthode addClass et removeClass

dans ce cas

$(".selected").removeClass("selected").addClass("unselected"); 

note comment j'enchaînée les deux ensemble ..

Answer 4

$('li').mouseover(function(){ 
    $(this).addClass('selected'); 
    console.log("adding class"); 
} 
).mouseout(function(){ 
    $(this).removeClass('selected'); 
    console.log("removing class"); 
}); 

échantillon de travail: http://jsfiddle.net/MdNXZ/

Answer 5

Avec le code HTML suivant:

<ul> 
    <li><a href="">Link 1</a></li> 
    <li><a href="">Link 2</a></li> 
    <li><a href="">Link 3</a></li> 
    <li><a href="">Link 4</a></li> 
    <li><a href="">Link 5</a></li> 
</ul> 

La ligne de script JQuery pour ce que vous demandez serait:

$('li').hover($(this).children('a').toggleClass('selected')); 

Voilà. Un seul paquebot.

Docs pour les fonctions:

http://api.jquery.com/hover/

http://api.jquery.com/toggleClass/

http://api.jquery.com/children/

---