Bootstrap導航欄激活狀態

Question

• 我有一個共同標題的網站。
• 該標題包含導航欄。
• 當我點擊條形圖頁面加載時的導航項發生。
• 考慮到上下文，我如何設置與加載頁面相關的導航項的Bootstrap導航欄活動狀態。

既然有一個導航欄項目，當點擊一個頁面加載，我不能只用

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

請給我提供一個更好的解決方案。

Answer 1

作爲我的問題的解決方案，我遵循以下方法。

我爲每個導航欄項添加了HTML ID。 然後在與每個導航欄項目相關的每個頁面中，我使用javascript添加了Bootstrap活動類，如下所示。

$（「＃ID_of_the_navi_bar_item」）。addClass（'active'）;

Answer 2

頁面加載時，您必須檢查錨點的鏈接是否與頁面位置匹配。

$(".nav a").each(function() { 
    if(document.location.href.indexOf(this.href)>=0) { 
     $(this).parent().addClass("active"); 
    } 
});