ブートストラップナビゲーションバーのアクティブな状態

Question

• 私は共通の見出しを持つウェブサイトを持っています。
• この見出しはナビゲーションバーに含まれています。
• バーページのナビゲーション項目をクリックすると、読み込みが行われます。
• コンテキストを考慮すると、読み込まれたページに関連するナビゲーションアイテムに対して、ブートストラップナビゲーションバーのアクティブ状態を設定する方法を教えてください。

ナビゲーションバーの項目をクリックすると、ページの読み込みがありますので、私はちょうど

$(".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"); 
    } 
});