Ajout et suppression d'une classe active

Question

Je sais que cela devrait être simple et a déjà été couvert un million de fois, mais je n'arrive pas à le faire fonctionner.

C'est votre script de base qui fait que le dernier lien que vous avez cliqué dans une liste devient le lien 'actif' en y ajoutant la classe 'active'.

HTML

<ul id="projectsList"> 
      <li><a href="#" class="activeProject" id="portoftyne">Port of Tyne</a></li> 
      <li><a href="#" id="eaga">Eaga</a></li> 
      <li><a href="#" id="gong">Gong</a></li> 
      <li><a href="#" id="nufc">NUFC</a></li> 
     </ul> 

jQuery

$(document).ready(function() { 
    $('#projectsList a').click(function(){ 
     $('.activeProject').removeClass('activeProject') 
     $(this).addClass("activeProject"); 
    }); 
}); 

devrait fonctionner, ne pas du tout.

EDIT Rien à redire avec ce code, cela fonctionne très bien. Il y avait une section de code au-dessus dans le document qui l'empêchait de fonctionner.

Answer 1

Je n'y vois aucun problème.

regard: http://jsfiddle.net/JqMK8/

il travaille.

l'erreur doit être un autre endroit

Answer 2

Essayez d'être plus précis avec le sélecteur:

$(document).ready(function() { 
    $('#projectsList li a').click(function(){ 
     $('.activeProject').removeClass('activeProject') 
     $(this).addClass("activeProject"); 
    }); 
}); 

Je ne suis pas sûr de ce qui ne va pas. Ce code fonctionne pour d'autres personnes ...

Answer 3

je l'essayer et ça marche, rien de mal dans votre code:

DEMO

Answer 4

Peut-être l'ID #projectsList est modifiée par votre processeur de sortie? Peut se produire dans .NET ou dans certains frameworks Java.

Essayez d'assigner la classe .projectsList à la place et voyez si cela fonctionne.

je pourrais recommander aussi la pratique de la délégation de l'événement au lieu:

$('.projectsList').click(function(evt){ 
    if (evt.target.nodeName == 'A') { 
    var elm = $(evt.target); 
    if (elm.hasClass('activeProject')) { return; } 
    $('.activeProject').removeClass('activeProject'); 
    $(evt.target).addClass('activeProject'); 
    } 
}); 

(simplifié et rapide par écrit)

MISE À JOUR Sam, je recommande JavaScript Lint si vous ne l'avez pas essayé. L'utiliser online ou dans votre éditeur (il y a des bundles et des plugins pour cela) vous permettra de repérer facilement les erreurs et les avertissements dans votre code JavaScript.

Answer 5

Je suggère fortement d'utiliser une variable pour conserver la référence à activeProject. Dans le cas où vous avez de grandes pages cela économiserait beaucoup sur le traitement que la recherche DOM peut être coûteux. Cela le rendra également moins sujet aux problèmes comme celui que vous avez (sélectionnant le mauvais élément).

$(document).ready(function() { 
     var active = $('#projectsList a.activeProject'); 
     $('#projectsList a').click(function() { 
      if(active) $(active).removeClass('activeProject'); 
      $(this).addClass("activeProject"); 
      active=this; 
     }); 
    });