Bascule classe active dans la barre de navigation avec JQuery

<ul>
                <li id="tabHome" class="active"><a href="@Href("~")">Home</a></li>
                <li id="tabCMDS"  ><a href="@Href("~/CMDS")">CMDS</a></li>
                <li id="tabServiceMonitor" ><a href="@Href("~/Monitor")">Service Monitor</a></li>
                <li id="tabBatchInterface" ><a href="@Href("~/BatchInterface")">Batch Interface</a></li>
            </ul>

Donc je voulais lier à click de chacun de ces Id, et de définir class="active" sur celui qui a été cliqué, et le retirer de tous les autres.

Je peux faire la première partie, mais comment puis-je faire plus tard?

OriginalL'auteur slandau | 2011-06-23

  1. 32
    $(function() {
   $("li").click(function() {
      //remove classes from all
      $("li").removeClass("active");
      //add class to the one we clicked
      $(this).addClass("active");
   });
});

    Il serait sage de donner un cours <li>'s de sorte que vous pouvez sélectionner seulement ceux-ci, mais vous obtenez l'idée.

    OriginalL'auteur Björn

  2. 9

    Pas besoin de lier un événement click pour chaque ID mais au lieu de se lier à tous les éléments de la liste de cette liste non ordonnée. Ensuite, utilisez la .parent().enfants (les) méthodes. Suivante devrait fonctionner:

    $('ul li').click(function(){
  $(this).addClass('active');
  $(this).parent().children('li').not(this).removeClass('active');
});
    7 ans plus tard, commentaire, mais : $(this).addClass('active').siblings().removeClass('active')
    haha.... il faudrait dire 🙂

    OriginalL'auteur Marlin

  3. 3

    Vous trouverez probablement mieux (sinon la page va sauter) - 

    $(function() {
$("li").click(function() {
  //remove classes from all
  $("li").removeClass("active");
  //add class to the one we clicked
  $(this).addClass("active");
  //stop the page from jumping to the top
  return false;
});
});
    Si vous voulez éviter la page de sauter, vous devez simplement appeler preventDefault() sur l'événement. De retour de faux peuvent avoir des effets secondaires indésirables tels que la prévention de futurs propagation de l'évènement. $("li").click(function(e) { e.preventDefault(); });

    OriginalL'auteur Phil Carr

  4. 1

    Que vous pouvez faire:

    $('li').click(function(e){
    e.preventDefault();
   $(this).addClass('active');
    $(this).siblings().each(function(){
        $(this).removeClass('active') ;

    });
});

    violon ici http://jsfiddle.net/UVyKe/1/

    7 ans plus tard, commentaire, mais : $(this).addClass('active').siblings().removeClass('active')

    OriginalL'auteur Nicola Peluchetti

  5. 0

    Donner à l'amt un id ou une classe, puis sélectionnez hors de lui. 

    <ul id = "nav">...

var $navItems = $('#nav > li');
$navItems.click(function(){
    $navItems.removeClass('active');
    $(this).addClass('active');
});

    OriginalL'auteur Stefan Kendall

  6. 0
    $("ul li").click(function()
{
$("ul .active").removeClass("active");
$(this).addClass("active");
});

    OriginalL'auteur Itai Sagi

  7. -1

    Vous pouvez ajouter actif de la classe à l'aide de ci-dessous ligne seule sans l'aide de tout événement

    $('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');

    lien à consulter

    OriginalL'auteur Manthan Vaghani