beleuchten aktuelle Seite nav

Question

Seite lautet: http://rezolve.4pixels.com/banks-and-telcos/demo/index.php#

Ich möchte, dass meine Navigation zu einem bestimmten „li“, indem Sie die Klasse „aktiv“ die Seite, die ich bin auf zeigen, aber meine Navigation ist ein gehören. Ich weiß, wie man das auf einer Scroll-Seite mit einer einzelnen Seite macht, da ich gerade erkenne, wenn ich auf einen Link klicke und eine Klasse zu einem Eltern-Li hinzufüge.

Ich bin mir nicht sicher, wie ich das bei der Verwendung eines Include (Nav) anstelle nur eines festen nav (Code auf der Seite), wo ich nur manuell die "aktive" Klasse wo erforderlich auf jeder Seite hinzufügen.

Ich weiß, ich müsste mit einem 'window.location.href' beginnen, um die Seite zu bekommen, die ich anmelde, aber dann kann ich nicht meinen Kopf ringsherum zu einem bestimmten Menüelement hinzufügen meine aktive Klasse.

Answer 1

Sie könnten dem Element, für das Sie einen aktiven Status wünschen, ein Datenattribut hinzufügen. Machen Sie das Datenattribut gleich der URL der Seite und überprüfen Sie mit Javascript, um beim Laden der Seite eine aktive Klasse hinzuzufügen.

Ich bin mir nicht sicher, ob dies der einfachste Weg ist, aber es wird gut funktionieren.

Answer 2

Nach Dokument bereit, können Sie die href auf die aktuelle Seite url

$(document).ready(function(){ 
    var currentPageUrl = location.href; 
    $('li a').each(function(){ 
     $(this).toggleClass('active', this.href === currentPageUrl); 
    }); 
});