Bootstrap nav sınıfına aktif olarak ayarla

Question

Bir bootstrap navbar'ım var ve üzerine tıkladığımda başka bir li öğesi için aktif sınıf ayarlamak istiyorum.

HTML

<script type="text/javascript"> 
    $('.navbar-nav li').click(function() { 
    $('.navbar li').removeClass('active'); 
    var $this = $(this); 
    if (!$this.hasClass('active')) { 
     $this.addClass('active'); 
    } 
    }); 
</script> 

Çalışmıyor

<nav class="navbar"> 
    <div class="navbar-default" > 
    <ul class="nav navbar-nav"> 
     <li class="active"><a>Content</a></li> 
     <li><a>News</a></li> 
     <li><a>Subject</a></li> 
    </ul> 
    </div> 
</nav> 

CSS i javascript yeniyim. Sanırım sınıf öğesini yanlış bildiriyor olabilirim ve jQuery benim betiğimi yeniden tanıtmadı. Ekli kodu bulmak için lütfen

Answer 1

.

<nav class="navbar" style="cursor:pointer;"> 
<div class="navbar-default"> 
    <ul class="nav navbar-nav" id="navUl"> 
     <li class="active"><a>Content</a></li> 
     <li><a>News</a></li> 
     <li><a>Subject</a></li> 
    </ul> 
</div> 

ve jquery geçerli:

$('#navUl > li').click(function() { 

    //Check for active class 
    if (!$(this).hasClass("active")) { 

     // Remove the active class 
     $("li.active").removeClass("active"); 

     // active current/clicked li 
     $(this).addClass("active"); 
    } 
}); 

ben sadece jquery için tanımlayıcı olarak id ekleyin

siz de sınıfını kullanabilirsiniz.

Answer 2

data-toggle="tab" ile çalışır, javascript içermeyen bir sekmeyi etkinleştirir.

<nav class="navbar"> 
    <div class="navbar-default" > 
    <ul class="nav navbar-nav"> 
     <li class="active"><a data-toggle="tab">Content</a></li> 
     <li><a data-toggle="tab">News</a></li> 
     <li><a data-toggle="tab">Subject</a></li> 
    </ul> 
    </div> 
</nav>