bootstrap：如何激活菜單？

我在我的header.jsp文件中有一個菜單。像這樣：bootstrap：如何激活菜單？

<ul class="nav nav-pills"> 

<li class="active"><a href="index.jsp">home</a></li> 

<li><a href="product.jsp">product</a></li> 

</ul>

index.jsp和product.jsp都包含header.jsp。默認情況下，Home項目被選中並且處於活動狀態。當我點擊產品菜單，它被導航到product.jsp頁面，產品項目應該是活動的，我的問題是如何將class =「active」設置爲<li>產品</li >？

您的回答是讚賞。萬分感謝。

來源

2013-10-01 user1205398

您需要考慮如何識別哪個頁面處於活動狀態，並依次告訴瀏覽器應用那個li的活動類。

一個選項是硬編碼到每個頁面的腳本;

//html 
<ul class="nav nav-pills"> 

<li id="home"><a href="index.jsp">home</a></li> 

<li id="product"><a href="product.jsp">product</a></li> 

</ul> 

<script> 
$('#product').addClass('active'); 
</script>

但這是耗時的，特別是如果你有6+頁面。有更好更有活力的方式來做到這一點。

來源

2013-10-01 12:57:24 Rexxo

感謝您的回答。如果不是硬編碼，會更好。 – user1205398

也許可能會更好地包含一些腳本來檢查當前頁面是什麼，檢查菜單是否包含與其相匹配的ID並應用該類。可以使用此頁面標題或頁面上的隱藏字段。 – Rexxo

我知道這是一個老問題，但如果你正在尋找一個基於jQuery的前端解決方案，你可以這樣做：

$(function() { 
    $('ul.nav li a[href$="' + window.location.pathname+ '"]').parent().addClass("active"); 
});

這將動態的主動類添加到父（在你的情況<li>）<a>元素如果href屬性匹配的URL路徑。你需要做的改變是寫的完整路徑 - 這樣：

<ul class="nav nav-pills"> 
    <li id="home"><a href="/actual/site/path/index.jsp">home</a></li> 
    <li id="product"><a href="/actual/site/path/product.jsp">product</a></li> 
</ul>

該解決方案不被附加到鏈接，因爲它只檢查路徑散列或查詢參數進行。

來源

2017-03-30 15:49:20 Aender

bootstrap：如何激活菜單？

回答

相關問題