Farbe (CSS) des Links auf die aktuelle Seite verändern

[Thomas K.]

Hallo allerseits,

ich bastele an einer einfachen und statischen Seite, alles in XHTML und alle Formatierungen via CSS. Ich hab 2 Navigationsleisten (<li>), und es wäre schön, wenn der Link auf die aktuelle Seite (d.h. "wo man gerade ist") eine andere Farbe hätte als die normalen Links.

Natürlich kann ich die Linkliste in der jeweiligen HTML-Datei verändern, aber wenn ich später einen Link hinzufügen will, muss ich dann alle Dateien einzeln korrigieren und kann nicht einfach überall die Linkliste ersetzen.

Deswegen dachte ich an ein JS, das die Links auf die jeweils aktuelle Seite anders färbt (bzw einer anderen CSS-Klasse zuordnet). Da gibt es bestimmt doch irgendwelche Standart-Lösungen oder? Vielleicht brauche ich auch nur einen Suchbegriff (i.e. wie man so was nennt), ich bin in all diesen JS Sammlungen ein bisschen orientierungslos.

Danke schonmal.

[Cheatah]

Hi,

ich bastele an einer einfachen und statischen Seite, alles in XHTML und alle Formatierungen via CSS. Ich hab 2 Navigationsleisten (<li>), und es wäre schön, wenn der Link auf die aktuelle Seite (d.h. "wo man gerade ist") eine andere Farbe hätte als die normalen Links.

äh, es wäre schön, wenn es keinen Link auf die aktuelle Seite gäbe. Das ist nämlich widersinnig.

Natürlich kann ich die Linkliste in der jeweiligen HTML-Datei verändern, aber wenn ich später einen Link hinzufügen will, muss ich dann alle Dateien einzeln korrigieren und kann nicht einfach überall die Linkliste ersetzen.

Serverseitige Mechanismen nehmen Dir dies ab.

Deswegen dachte ich an ein JS, das die Links auf die jeweils aktuelle Seite anders färbt (bzw einer anderen CSS-Klasse zuordnet). Da gibt es bestimmt doch irgendwelche Standart-Lösungen oder?

Nein, höchstens Standard-Lösungen. Das Wort hat nur ein "t".

Vielleicht brauche ich auch nur einen Suchbegriff (i.e. wie man so was nennt), ich bin in all diesen JS Sammlungen ein bisschen orientierungslos.

http://de.selfhtml.org/javascript/objekte/links.htm ist der Umweg, den Du anstatt eines einfachen, serverseitigen Vorgehens nehmen könntest. Und der natürlich nicht funktioniert, wenn der Client nicht über aktiviertes JavaScript verfügt.

Cheatah

[wahsaga]

hi,

Deswegen dachte ich an ein JS, das die Links auf die jeweils aktuelle Seite anders färbt (bzw einer anderen CSS-Klasse zuordnet). Da gibt es bestimmt doch irgendwelche Standart-Lösungen oder? Vielleicht brauche ich auch nur einen Suchbegriff (i.e. wie man so was nennt), ich bin in all diesen JS Sammlungen ein bisschen orientierungslos.

Links in einer Schleife durchlaufen (getElementsByTagName bzw document.links), Linkziel mit location.href bzw. document.URL vergleichen, bei "Treffer" Klasse ändern.

gruß,
wahsaga

[D.R.]

Hallo,

[…] ein JS, das die Links auf die jeweils aktuelle Seite anders färbt (bzw einer anderen CSS-Klasse zuordnet).

Durchlaufe alle Link und überprüfe deren Ziele mit der URI des aktuellen Dokumentes. Die href-Eigenschaft enthält ja immer das vollständige Verweisziel.

Ich würde das so machen:

  
for (var i = 0; i < document.links.length; i++){ //alle Links durchlaufen  
 if (document.links[i].href == location.href){ //Stimmt das Zeil mit dem akztuellen URI überein?  
  document.links[i].className = "aktuell"; // wenn ja: Klasse setzen, die man per CSS formatieren könnte  
  break; //Wenn sich ohnehin nur ein Link dieser Art im Dokument befindet, kann man die Schleife abbrechen, um Zeit zu sparen  
 }  
}

mfg. Daniel

[Nixwisser]

ich bastele an einer einfachen und statischen Seite, alles in XHTML und alle Formatierungen via CSS. Ich hab 2 Navigationsleisten (<li>), und es wäre schön, wenn der Link auf die aktuelle Seite (d.h. "wo man gerade ist") eine andere Farbe hätte als die normalen Links.

Natürlich kann ich die Linkliste in der jeweiligen HTML-Datei verändern, aber wenn ich später einen Link hinzufügen will, muss ich dann alle Dateien einzeln korrigieren und kann nicht einfach überall die Linkliste ersetzen.

Sofern Du einen Apache benutzt, ist mod_include Dein Freund: Navigationsleiste auslagern und per include virtual in alle Seiten einbinden, in der Navigationsleistendatei bei jedem Menüpunkt die Variable DOCUMENT_URI mittels if prüfen und gegebenenfalls per echo ein zusätzliches "aktiv" in das class-Attribut des <li>-Elements einfügen. Das sieht dann ungefähr so aus:

<li class="navi<!--#if expr="$DOCUMENT_URI == /bla/fasel" --><!--#echo " aktiv" --><!--#endif -->"><a href …

(An der Pfadangabe musst Du eventuell etwas arbeiten, da es sein kann, dass er aus dem führenden Schrägstrich auf ein PCRE-Muster schließt. Vielleicht wird's mit /bla/fasel oder dergleichem etwas.)

[Nixwisser]

Wobei mir gerade einfällt, …

gegebenenfalls per echo ein zusätzliches "aktiv" in das class-Attribut des <li>-Elements einfügen. Das sieht dann ungefähr so aus:

<li class="navi<!--#if expr="$DOCUMENT_URI == /bla/fasel" --><!--#echo " aktiv" --><!--#endif -->"><a href …

… dass bei der aktuellen Seite der Verweis überflüssig ist, aber den kann man ja bequem ebenfalls in den if-Block einbauen. Darüber hinaus ist der echo-Befehl Quatsch, der Text kann direkt reingeschrieben werden.

Alles auseinanderklamüstert:

<!--#if expr="$DOCUMENT_URI == /bla/fasel" -->
<li class="navi aktiv">Blafasel</li>
<!--#else -->
<li class="navi"><a href …>Blafasel</a></li>
<!--#endif -->

"aktiv" ist eine zusätzliche CSS-Klasse, dem aktiven <li>-Element werden also zwei Klassen zugewiesen, navi und aktiv.

[Thomas K]

Vielen Dank für die hilfreichen Antworten; Mit SSI hab ich noch nie gearbeitet, werde mir das aber auf jeden Fall anschauen, ansonsten Danke für den konkteten JS Tipp!