Die "aktive" Klasse zum aktuellen Menüpunkt hinzufügen, indem Pfad nach Hash (#) erkannt wird?

Question

Meine Website verwendet einen Hash in seiner URL, um mit AJAX (which I got from this tutorial) zu navigieren. Wenn auf einen Link geklickt wird, wird ein/#/(Linkname) am Ende der URL hinzugefügt.

Wenn ich bei mysite.com bin und auf "Fotos" klicke, wird die URL mysite.com/#/photos und das "#content" div wird erneut mit dem #content-div aus gefüllt /Fotos.

Auch, wenn aus irgendeinem Grunde, die Benutzer manuell Typen „mysite.com/photos“, und klickt dann auf „Bio“, wird seine URL aussehen wie „mysite.com/photos/#/bio“

Die Tatsache, dass die Seite nicht neu geladen wird, und dass die URl nicht GENAU mit der href im Menü ein Tag übereinstimmt, erschwert es mir, herauszufinden, wie man eine aktive Klasse zum aktuellen Menüpunkt hinzufügt.

mein Menü wird von Wordpress erzeugt wird, und sieht aus wie dieses

<div id="main-menu"> 
<ul> 
<li><a href="mysite.com/photos">Photos</li> 
etc. 
</ul> 
</div> 

Bitte um Hilfe!

Answer 1

Ich vermute, dass Sie in mysite.com/photos/#/bio aktiv auf die Bio-Link setzen möchten? Mit anderen Worten, das letzte "Wort" der URL.

Um dies zu erreichen, können Sie so etwas tun:

var path = window.location.pathname.split("\/"), myString; 

if(path[path.length-1] === "") 
    myString = path[path.length-2]; 

else 
    myString = path[path.length-1]; 

myString = myString.toLowerCase() 
console.log(myString); 

Die if/else Prüfung ist es, weil, wenn der Pfadname in der Anordnung nach Split "/ hola/bandola /" das letzte Element ist Wille sei eine leere Saite, aber wenn es nur "/ hola/bandola" ist, wird "bandola" der letzte Gegenstand sein. Um es auf beide Arten funktionieren zu lassen, ist die Überprüfung notwendig. Jetzt haben Sie diese Variable mit der richtigen Zeichenfolge und können die richtige Verknüpfung mit dieser Information aktivieren.

EDIT: Da Sie die Navigationslinks nicht dynamisch generieren, müssen Sie den Wert, den Sie von meinem Code erhalten haben, mit etwas eindeutigem für jede Navigationsverbindung vergleichen. Mein Vorschlag ist, dass Sie ein Datenattribut in den a-Tags hinzufügen, das mit der Zeichenfolge übereinstimmt, die Sie aus meinem Code erhalten haben. Beispiel: <li><a href="mysite.com/photos" data-page="photos">Photos</li>

Nun gehen Sie durch die einzelnen a-Tag in der UL und vergleichen Sie die Daten-Seite Werte auf den Wert, den Sie aus dem Abfragezeichenfolgeflag bekam, und setzen Klasse auf „aktiv“, wenn sie übereinstimmen:

var links = $("#main-menu").find("a"); 
$.each(links, function() { 
     if($(this).data("page") === myString) 
      $(this).addClass("active"); 
}​);​ 

Sie könnten einfach den Text innerhalb der a-Tags verglichen haben, aber wenn der Text nicht mit der URL-Zeichenfolge übereinstimmt, funktioniert das nicht, also ist es besser, ein Datenattribut hinzuzufügen. Beachten Sie, dass ich den obigen Code bearbeitet habe, um sicherzustellen, dass die Variable "myString" beim Vergleich mit den Datenattributen klein geschrieben ist. Ich hoffe du verstehst.

EDIT2:

Um den Text innerhalb der a-Tag zu vergleichen, sondern diese jede Schleife verwenden statt:

var links = $("#main-menu").find("a"); 
$.each(links, function() { 
     if($(this).html("page").toLowerCase() === myString) 
      $(this).addClass("active"); 
}​);​