web-dev-qa-db-fra.com

Menu Bootstrap changer la classe active au clic

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 le passage de la classe <li> à active lorsque l'utilisateur clique sur son domicile ou son travail?

Ce qui suit ne fonctionne pas pour moi

$("#homeL").on("click",function(){
  $(".nav navbar-nav li").removeClass("active");
  $(this).addClass("active");
});
javascripthtmltwitter-bootstrap
15
rikket

MIS &AGRAVE; JOUR

Vos sélecteurs CSS semblent être faux. S'il vous plaît essayez comme indiqué ci-dessous,

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

</script>

J'ai créé un plunkr pour cela ici

31
Tharaka

Essaye ça:

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

Vous devrez jouer avec avec vos balises données. Ce qui m'a aidé a été de déclarer cela de devenir actif, puis de supprimer la classe active. 

2
Deaundrie Howard

un de vos sélecteurs est mal formé, en regardant votre code html, il semble que sur la troisième ligne du script, le sélecteur ne fasse pas ce que je pense que vous voulez.

$("#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");
});
1
Mark F
    $(".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é que cela devenait actif, supprimer la classe active et également ajouter la méthode .siblings () qui vous permet de rechercher les frères et soeurs des éléments li du document.

1
Kyuubido0

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>
0
SANTHOSH.SJ