Как добавить класс в bootstrap navbar

Question

привет, у меня есть navbar от bootstap, и я хочу добавить класс avtive, когда я автоматически переключаю страницу.

как сделать. У меня есть мой скрипт, но он не будет работать.

Как это сделать с помощью jquery?

<nav class="navbar navbar-default navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#"> 
       <img src="img/logogram.png" alt=""> 
      </a> 
      </div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="people.html">people</a></li> 
       <li><a href="#">gallery</a></li> 
       <li><a href="inspiration.html">inspiration</a></li> 
      </ul> 

      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="timeline-job.html">Jobs oportunity</a></li> 
       <li><a href="#">hirring a chief?</a></li> 
       <li><a href="register-1.html">login|signup</a></li> 
      </ul> 
      </div><!-- /.navbar-collapse --> 
     </div><!-- /.container-fluid --> 
     </nav> 

<script> 
    var loc = window.location.href; 
    $('.navbar ul li a').each(function() { 
     var status = loc.indexOf($(this).attr('href')) > -1; 
     // $(this).toggleClass('active', status); 
     if (status) { 
      $(this).addClass('active'); 
     } 
    }); 
</script> 

пожалуйста, помогите, я не знаю, почему мой запрос не работал

Answer 1

Это может работать в вашем случае, так как вы, кажется, плавающим только главные страницы уровня:

изменение:

var loc = window.location.href; 

к:

var path = window.location.pathname; 
var loc = path.split("/").pop(); 

также:

от:

var status = loc.indexOf($(this).attr('href')) > -1; 

в

status = ($(this).attr('href') === loc); 

Путь у вас есть это то, что вы будете добавлять active класс к a tag. Если вы хотите, чтобы добавить его в li, попробуйте это также:

if (status) { 
    $(this).closest('li').addClass('active'); 

Answer 2

Я надеюсь, что этот код работает:

var loc = window.location.href; 
$('.navbar ul li a').each(function() { 
var status = loc.indexOf($(this).attr('href')); 
$(this).closest('li').removeClass('active'); 
console.log(status); 

if (-1 != status) { 
    console.log(status); 
    $(this).closest('li').addClass('active'); 
} 

}); 

Answer 3

Так что это довольно легко запуске каждая функция для вашего .navbar ul li a, чтобы проверить, window.location.href равен navbar href. Затем вы добавляете активный класс.

В начальной загрузке вы хотите активный класс должны быть добавлен к NavBars <li> тегов и не <a> тегов так в следующем примере я добавил активный класс к родителю <a> но если по каким-то причинам вы не хотите, чтобы он добавил в li, а затем удалите .parent() из сценария, и он добавит его в тег <a>. Также вам не нужно вручную добавлять активный класс к первому тегу <li>, потому что скрипт сделает это за вас, чтобы вы могли удалить все активные классы из ваших значков navbars <li>. Все, что сказано, ваш сценарий jquery будет выглядеть так:

$(".navbar ul li a").each(function() { 
    if (this.href == window.location.href) { 
     $(this).parent().addClass("active"); 
    } 
});