活動鏈接菜單開關怪異行爲（引導）

Question

我很驚訝，Bootstrap不提供自動化工具來切換.active類之間的.nav酒吧不同鏈接。

所以我搜索，得到了一些幫助，並試圖將此腳本應用到我的菜單：

$('.nav li a').on('click', function() { 
    alert("class added " + $(this).parent().find('a').attr('href')); 
    $(this).parent().parent().find('.active').removeClass('active'); 
    $(this).parent().addClass('active'); 
}); 

這是HTML：

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <!-- blah blah --> 
     </div> 
     <div class="collapse navbar-collapse" id="navbar-collapse"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="{{ URL::to('/') }}">Home</a></li> 
       <li><a href="{{ URL::to('/directions') }}">Directions</a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 

發生奇怪的是，當我點擊Directions從Home刪除類.active，然後去Directions，但只是半秒鐘，然後它回到了以前的樣子。

我 「調試」 目標是這樣的：

$('.nav li a').on('click', function() { 
    alert("clicked " + $(this).attr('href')); 
    alert("class removed-> " + $(this).parent().parent().find('.active').find('a').attr('href')); 
    alert("class added " + $(this).parent().find('a').attr('href')); 
    $(this).parent().parent().find('.active').removeClass('active'); 
    $(this).parent().addClass('active'); 
}); 

而且在Directions點擊時，輸出爲：

1. 點擊http://localhost:8000/directions
2. 類中刪除http://localhost:8000
3. 類添加http://localhost:8000/directions

因此，瞄準正確的元素似乎沒有錯。

劇本出了什麼問題，爲什麼會發生這種奇怪的事情？

Answer 1

由於腳本沒有爲某種原因，我終於實現了這個在菜單中每個選項的工作：

<li class="{{ Request::path() == 'directions' ? 'active' : '' }}"> 

Answer 2

您的代碼必須有其他錯誤，您發佈的代碼按預期工作。這裏是一個小提琴：

http://jsfiddle.net/StephanWagner/xnVM9/

$('.nav li a').on('click', function() { 
    $(this).parent().parent().find('.active').removeClass('active'); 
    $(this).parent().addClass('active'); 
}); 

我刪除了崩潰類，所以它更容易在撥弄看到的，但它也可以與類。