Bootstrap Navigationsleiste aktiven Zustand

Question

• Ich habe eine Website mit einer gemeinsamen Überschrift.
• Diese Überschrift enthält eine Navigationsleiste.
• Wenn ich auf ein Navigationselement in der Leiste klicken, wird die Seite geladen.
• In Anbetracht des Kontextes, wie kann ich die Bootstrap Navigationsleiste aktiven Zustand für Navigationselement, die auf die geladene Seite bezogen ist.

Da es eine Seite zu laden, wenn auf einer Navigationsleiste Element klicken, kann ich einfach nicht

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

Bitte benutzen Sie mir eine bessere Lösung.

Answer 1

Als eine Lösung für mein Problem, habe ich den folgenden Weg verfolgt.

Ich habe HTML-IDs für jede Navigationsleiste hinzugefügt. Dann habe ich auf jeder Seite, die zu jedem Element der Navigationsleiste gehört, die aktive Bootstrap-Klasse mit Javascript wie folgt hinzugefügt.

$ ("# ID_of_the_navi_bar_item"). AddClass ('active');

Answer 2

Wenn die Seite geladen ist, müssen Sie überprüfen, ob die Verknüpfungen der Anker mit dem Seitenort übereinstimmen.

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