Изменение Nav li на активный с помощью jquery - Bootsrap

Question

Я хочу изменить класс Active на моем навигаторе (используя загрузку), когда я нажимаю на ссылку.

Это мой HTML:

  <div class="navbar navbar-fixed-top navbar-inverse"> 
      <div class="navbar-inner"> 
       <div class="container"> 
        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a class="brand" href="#">Phonebook</a> 
        <div class="nav-collapse collapse"> 
         <ul class="nav"> 
          <li class="active"><a href="#">Home</a></li> 
          <li><a href="#about">About Us</a></li> 
          <li><a href="#contact">Contact</a></li> 
         </ul> 
        </div> 
       </div> 
      </div> 
     </div> 

Я попытался follwing JQuery код, который я получил от ответа здесь на сайте, но он не работает.

Это код:

 $(document).ready(function() { 
     $('.nav li a').click(function (e) { 
      var $this = $(this); 
      if (!$this.hasClass('active')) { 
       $this.addClass('active'); 
      } 
      debugger; 
      e.preventDefault(); 
     }); 
    }); 

Answer 1

Вы усложняя его:

$(document).ready(function() { 
    $('.nav li').on('click', function (e) { 
     $(this).addClass('active').siblings().removeClass('active'); 
    }); 
}); 

FIDDLE

и почему вы бы добавить хэш ссылки на якоря, а затем использовать preventDefault в обработчик события?