$(function(){
$("a").each(function(){
if ($(this).attr("href") == window.location.pathname){
$(this).addClass("selected");
}
});
});Diese Funktion fügt jedem Link (auch relativen), der auf die aktuelle Seite zeigt, die Klasse „selected“ hinzu.
Ich suche ein Skript, das ein Menü hat, das anzeigt, auf welchem Teil der Seite man sich befindet. Z.B.
LINK 1 LINK2 LINK3 (fett, weil man sich in diesem Bereich befindet)
LINK 3 Bereich
Das ist genau das, was ich suche, aber ich bin mir nicht sicher, wie ich es einsetzen soll…
Muss das in Skript-Tags im Kopfbereich meiner Seite stehen?
Wie definiere ich die Klasse „selected“ in meinem styles.css-Stylesheet?
Wie kann ich diese Zeile bearbeiten?
if ($(this).attr(“href”) == window.location.pathname){
zu etwas, das als wahr ausgewertet wird, solange der Pfad gefunden wird. Brauche ich eine Alternative für die == Operatoren. Gibt es in JS etwas, das SQLs „LIKE“ emuliert?
Danke.
Sie können reguläre Ausdrücke verwenden, um eine Funktionalität zu erzielen, die SQLs „LIKE“ emuliert. Es ist viel, viel mächtiger als „LIKE“, aber auch viel, viel komplizierter zu erlernen.
Das hier zu erklären, übersteigt den Rahmen dieses Themas, aber Sie finden weitere Informationen zur Methode
.match()in JavaScript unter https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/match und alles, was Sie jemals über reguläre Ausdrücke wissen müssen, unter http://www.regular-expressions.info/javascript.html.Obwohl kompliziert zu erlernen, sind reguläre Ausdrücke (oft abgekürzt RegEx oder RegExp) unglaublich nützlich, und obwohl ich noch viel über sie lernen muss, hat das, was ich gelernt habe, viele komplizierte Situationen viel einfacher gemacht.
Vielen Dank dafür, es gibt Hunderte von Skripten, die das tun, aber dies ist das erste, das tatsächlich funktioniert und hält, was es verspricht. Sie sind ein Genie und haben mir viel Leid erspart, nochmals vielen Dank!!!!!!!!!!!!!!!
Ach, das ist so schwierig! Ich verstehe nichts davon :(
Ich schätze, ich muss jemanden bezahlen, der an meiner Website weiterarbeitet.
Mmm, ich bin mir nicht sicher warum, aber es funktioniert bei mir nicht.
Ich denke, WordPress macht das automatisch, indem es .current zu den aktuellen Seiten hinzufügt.
Das scheint der prägnanteste Code zu sein, auf den ich gestoßen bin. Aber ich kann es immer noch nicht zum Laufen bringen. Ich arbeite an einem Child-Theme von Twenty Ten. Wenn Sie Tipps haben, warum es nicht funktioniert, würde ich mich freuen, davon zu hören.
Der obige Code hat bei mir nicht funktioniert, aber dieser Code, den ich gefunden habe, schon…
Der Grund dafür ist, dass die
.attr()-Methode in jQuery das zurückgibt, was tatsächlich im href-Attribut steht.Das stimmt möglicherweise nicht mit window.location.pathname überein, da Ihre Seite „http://google.com/test/“ sein könnte und Ihr href „http://google.com/test/“ oder „test/“ oder „/test/“ sein könnte.
Durch die Verwendung von
this.hrefwird die Eigenschaft des href-Tags abgerufen und nicht das gesetzte Attribut. Die Eigenschaft ist immer eine vollständige URL, die mit window.location übereinstimmt (was eigentlich nur window.location.href ist).Wenn Sie jQuery >= 1.6 haben, können Sie die
.prop()-Methode verwenden, um die Eigenschaft abzurufen. Dies ist also praktisch identisch mit Ihrem Schnipsel, verwendet aber die jQuery.prop()-Methode.(Also ist in diesem Beispiel
this.hrefdasselbe wie$(this).prop('href')und es funktioniert besser, da es in einem Format vorliegt, das konsistenter mit window.location.href ist.)Ich hoffe, das klärt die Situation. Es gibt noch einige Dinge, die dazu führen können, dass sie nicht übereinstimmen, aber dies wird auf jeden Fall mehr Fälle abdecken als der Code im ursprünglichen Beitrag.
Sie können http://stackoverflow.com/questions/5874652/prop-vs-attr für weitere Informationen über prop vs attr konsultieren.
Dieser Code hat auch für mich funktioniert.
Funktioniert wie Zauber, danke Chris
Danke, Sir.. es funktioniert wirklich..! :-D
Danke nochmals.
Vielen Dank.
Für alle, die Schwierigkeiten bei der Implementierung haben, alles, was Sie tun müssen, ist
1. Platzieren Sie den Code-Schnipsel im Kopfbereich Ihres Webdokuments oder in einer externen .js-Datei
2. Erstellen Sie Ihre Selektor-Klasse in Ihrer CSS-Datei.
.selected{color:#F00;} oder was auch immer Sie möchten.
nach weiterer Prüfung. Das hat nicht funktioniert…
Wirklich hilfreicher Beitrag – ich liebe das Web für diese Art von Hilfe!
@Bryan, dein Tipp hat bei mir wunderbar funktioniert :o)
Danke Chris Bowyer.
Ich mische einfach beides
$(function() {
$(“body a”).each(function() {
if (this.href == window.location) {
$(this).addClass(“selected”);
};
});
});
Manchmal (wenn beide Klassen das gleiche Attribut haben, in diesem Fall „Hintergrund“) sollten Sie Ihren CSS-Code mit !important schreiben.
zum Beispiel; Link mit Klasse somelink
CSS-Code;
a.somelink {
background:white;
}
.selected {
background:red !important;
}
Mit „!important“ wird der rote Hintergrund den weißen Hintergrund überschreiben. Und wenn er ausgewählt ist, sehen Sie rot. Wenn important nicht gegeben ist, sehen Sie einen weißen Hintergrund, in diesem Fall denken Sie, der Code funktioniert nicht ;)
Das hat in meinem benutzerdefinierten Tumblr-Theme wie ein Zauber funktioniert, und der Code ist viel besser als die anderen Schnipsel, die ich im Web gefunden habe. Musste nicht einmal ins Schwitzen kommen.
Sweeet.
Habe die parent-Methode verwendet, um .current an das übergeordnete Element von anzuhängen.
Das hat in meinem benutzerdefinierten Tumblr-Theme wie ein Zauber funktioniert, und der Code ist viel besser als die anderen Schnipsel, die ich im Web gefunden habe. Musste nicht einmal ins Schwitzen kommen.
Sweeet.
Habe die parent-Methode verwendet, um .current an das übergeordnete li von a anzuhängen.
Warum
each()verwenden, wennaddClass()selbst über jedes der ausgewählten Elemente iteriert?Zugegebenermaßen könnte der ternäre/bedingte Operator durch ein einfaches
if/elseersetzt werden, um die Sache zu vereinfachen, aber das obige ist etwas prägnanter und meiner Meinung nach genauso lesbar.David, das funktioniert perfekt für mich! Sehr, sehr gut!
Zum Wohle anderer (Anfänger wie ich), hier ist, was ich getan habe: Da ich „thispage“ anstelle von „current“ für meine Klasse verwende, habe ich „current“ im Code durch „thispage“ ersetzt, wie hier
Dann habe ich es direkt vor dem
</header>in meine Seite eingefügt, und dabei sichergestellt, dass ich das Ganze in öffnende und schließende Skript-Tags einschließe und ein CDN wie das von Google hinzufüge (vor der Funktion), wie hierUnd dann habe ich in meiner main.css-Datei Folgendes hinzugefügt:
Und, PRESTO! Es funktioniert wie ein Zauber!
Danke, David! Ich habe lange erfolglos nach dieser Lösung gesucht, und jetzt kann ich endlich sagen, ich habe sie gefunden. Danke nochmals.
Hallo Chris!
Ich verwende diesen Schnipsel, um mein benutzerdefiniertes Seitenleistenmenü in WordPress zu steuern, das einfach eine Liste mit einer Reihe von Links darin ist (HTML-Widget). Das Skript scheint gut zu funktionieren, aber ich erhalte seltsame Ergebnisse und habe keine Ahnung, was genau das Problem verursacht.
Das Problem ist
nur der erste Link erhält die erforderliche Klasse. Wenn ich auf andere Listenelemente klicke, passiert nichts – das Listenelement wird wie gewöhnlich gestylt, nicht wie meine Klasse .current-page sagt.
Ich mache wahrscheinlich etwas falsch, aber keine der Lösungen scheint bei mir zu funktionieren.
Hier ist mein Code
http://codepen.io/anon/pen/zxKzmR
Könnten Sie mir bitte helfen?