將我的導航欄設置爲自舉引導的鏈接

當我點擊按鈕時，我嘗試設置激活我的導航欄的元素。將我的導航欄設置爲自舉引導的鏈接

我的導航欄是這樣的：

navbar

但是當我點擊「是」爲爲例，在「G」仍然有效。

我的代碼是這樣的：

<div class="navbar span8" id="navbar"> 
    <div class="navbar-inner"> 
     <ul class="nav"> 
      <li><a href="#a">A</a></li> 
      <li><a href="#b">B</a></li> 
      <li><a href="#c">C</a></li> 
      <li><a href="#d">D</a></li> 
      <li><a href="#e">E</a></li> 
      <li><a href="#f">F</a></li>  
       .....   
     </ul> 
    </div> 
</div>

要設置類活躍的代碼是：

<li class="active"><a href="#f">F</a></li>

我如何能做到這一點使用jQuery？

來源

2013-05-31 mpgn

如果您只在一個頁面上使用導航欄，但如果實際上在頁面之間跳轉，那麼以下方法將非常有用，那麼您必須使用其他類似cookies或可能使用PHP的其他方法來實現解決方案。 –

您可以設置它的活性這樣的..

$('.nav li').click(function(){ 
    $('.nav li').removeClass('active'); 
    $(this).addClass('active'); 
})

Bootply

來源

2013-05-31 11:34:06 ZimSystem

您可以使用此代碼：

SEE DEMO

$('.nav li').click(function(){ 
    $(this).addClass('active').siblings().removeClass('active'); 
})

來源

2013-05-31 11:35:29

我的解決方法效果很好，當創造休息完整的網站。

主要JS是在這裏：

$(document).ready(function() { 
    var main_route = (window.location.pathname.split("/")[1]); 
    $('#navbar_' + main_route).addClass('active'); 
});

其工作原理是：

1）尋找網址的主要途徑。例如，如果網址是「http://www.benyon.com/projects/first_project」，它會得到「項目」。

JS片斷

var main_route = (window.location.pathname.split("/")[1]);

2）它然後使用它來參考該列表元素的ID用於使用級聯該特定按鈕。例如： ‘#navbar_’ + main_route與‘#navbar_projects’相同。

然後使用addClass(‘active’)添加「活動」類。

JS片斷

$('#navbar_' + main_route).addClass('active');

HTML摘錄

<li id="navbar_projects"><a href="/projects">Projects</a></li>

下行

爲此，您的路線需要與您要突出顯示的元素的索引具有相同的名稱。

來源

2016-09-03 13:36:13

將我的導航欄設置爲自舉引導的鏈接

回答

相關問題