Bootstrap changer de menu li active à la classe, cliquez sur

J'ai le menu suivant par bootstrap

HTML

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li class="active" id="homeL"><a data-scroll href="#Home">Home</a></li>
    <li><a href="#">About</a></li>
    <li class="" id="workL"><a data-scroll href="#Work">Work</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

comment puis-je modifier la modification de la <li> classe d'actif lorsque la maison ou au travail est cliqué?

Le suivant ne fonctionne pas pour moi

$("#homeL").on("click",function(){
  $(".nav navbar-nav li").removeClass("active");
  $(this).addClass("active");
});
Merci jsfiddle.net

OriginalL'auteur rikket | 2014-03-19

  1. 29

    Mis à JOUR

    Votre sélecteurs css semble être erronée. S'il vous plaît essayer comme indiqué ci-dessous,

    <script>
    $(".nav li").on("click", function() {
      $(".nav li").removeClass("active");
      $(this).addClass("active");
    });

</script>

    J'ai créé un plunkr pour cette ici

    essayé ceci, ne fonctionne toujours pas
    Merci de regarder ma mise à jour de réponse. J'ai créé un plunkr - plnkr.co/modifier/4qhuzgnCXUm86rCoUPii . N'est-ce pas ce que vous êtes après?
    merci pour votre aide, cependant, c'est toujours pas pour une raison quelconque. check it out sur mon site http://www.ericbartolo.com et vous pouvez inspecter l'élément. Merci
    Ok pas de souci, j'ai suivi votre plunkr et il fonctionne maintenant, j'ai été absent de la fonction, de façon imprudente de moi. Merci beaucoup @THara

    OriginalL'auteur Tharaka

  2. 2

    Essayez ceci:

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

    Sera à vous de jouer autour de vos étiquettes. Ce qui m'a aidé a été de déclarer ce de devenir actif, puis en supprimant la classe active.

    OriginalL'auteur Deaundrie Howard

  3. 1

    l'un de vos sélecteurs est mal formé, en regardant votre html, il ressemble sur la troisième ligne du script que le sélecteur n'est pas en faisant ce que je pense que vous le souhaitez.

    $("#homeL, #workL").click(function(){

  //$(".nav navbar-nav li") <-this is looking for a <li> inside a <navbar-nav>  
  //tag inside a tag with the class "nav"

  $(".nav.navbar-nav li").removeClass("active");
  $(this).addClass("active");
});

    OriginalL'auteur Mark F

  4. 1
        $(".ul li").on("click", function() {
        $(this).siblings().removeClass('active');
        $(this).addClass("active");
    });

    C'est la solution qui a fonctionné pour moi. J'ai déclaré ceci à devenir actifs et à supprimer la classe active et aussi d'ajouter de la .les frères et sœurs() méthode qui permet de faire une recherche pour les frères et sœurs de la li éléments dans le document.

    Pour ceci: $(.ul li) je pense que tu veux dire ceci:$(ul li) - en supposant que l'ul est un élément non une classe.

    OriginalL'auteur Kyuubido0

  5. 0

    Inclure ce script

        <script type="text/javascript">
    $(function(){
        $('.nav a').filter(function(){
            return this.href==location.href}).parent().addClass('active').siblings().removeClass('active');

        $('.nav a').click(function(){
            $(this).parent().addClass('active').siblings().removeClass('active')    
            });
        });
</script>

    OriginalL'auteur SANTHOSH.SJ