將導航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事件處理程序？