jQuery menu lien actif

Je suis en train de faire un jquery menu que quand je clique sur un des liens (sans rechargement de la page), elle change de classe "active" et supprime cette classe lorsque je clique sur un autre lien.

voici mon code :

<script type="text/javascript">
$(document).ready(function() {
  $(".buttons").children().("a").click(function() {
    $(".buttons").children().toggleClass("selected").siblings().removeClass("selected");
  });
});
</script>


  <ul class="buttons">
    <li><a class="button" href="#">Link1</a></li>
    <li><a class="button" href="#">Link2</a></li>
    <li><a class="button" href="#">Link3</a></li>
    <li><a class="button" href="#">Link4</a></li>
  </ul>

Quelqu'un peut me dire pourquoi mon code ne fonctionne pas et comment le résoudre?
Merci 🙂

OriginalL'auteur b0nd | 2010-03-26

  1. 5

    Le code original a échoué car cette syntaxe n'est pas valide:

    .children().("a")

    Le reste du code a également eu certains défauts fondamentaux. Essayez plutôt ceci:

    $(function () {
  $('.buttons a').click(function (event) {
    var $target = $(event.target);
    var $li = $target.parent();
    $li.addClass('selected').siblings().removeClass('selected');
  });
});

    Dans cette correction, la classe selected est appliqué à un <li>—pas un <a>—pour vous donner une meilleure flexibilité lors de l'écriture de feuilles de style CSS.

    Cela fonctionne très bien, merci 🙂

    OriginalL'auteur Ron DeVera

  2. 2

    Je voudrais changer:

    $(".buttons").children().toggleClass("selected").siblings().removeClass("selected");

    à 

    $("this").addClass('selected').siblings().removeClass("selected");

    OriginalL'auteur jps

  3. 1
    $(document).ready(function() {
  $(".buttons a").click(function() {
    $(".buttons a").removeClass("selected");
    $(this).addClass("selected"); 
  });
});
    Le seul problème est que cela peut produire des résultats irréguliers en raison de conditions de course où vous ne pouvez pas être sûr addClass sera déclenché après RemoveClass.
    Vous avez raison, cependant, j'ai utilisé cette dans le code de production et n'avait jamais entrer en conflit avec lui-même.
    Pardonnez-moi si je me trompe, mais n'est pas du JavaScript à thread unique de la nature signifie qu'il sera exécuté à chaque ligne une à une, en invoquant un code supplémentaire (comme jQuery méthodes internes) avant de passer à la ligne suivante pour exécuter?
    Je ne misez pas trop sur elle, mais j'ai implémenté cette fonction exacte, avec des résultats variables. Mais, si elle travaille dans ce scénario, pourquoi le réparer?
    votre solution fonctionne, mais malheureusement, il ne donne pas la flexibilité de style de la balise parente. Merci

    OriginalL'auteur alex