✔ aktuellen Link hervorheben (Fehler im Code)

suntrop

suntrop

Erfahrenes Mitglied
Hallo,

ich habe vor einigen Tagen im Internet Magazin ein Skript gefunden, das mir den aktuellen Link (z.B. in einer Navigation) farbig hervorhebt. Aber - offensichtlich - kann ich nicht korrekt abschreiben, denn es funktioniert nicht wie gewollt.

JS im Head:
PHP: 
<script type="text/javascript">
var anz = document.getElementsByTagName("a").length;

for (i=0; i<anz; i++)
{
	if (document.getElementsByTagName("a")[i].getAttribute("href") == location.href)
	{
		document.getElementsByTagName("a")[i].style.color = "red";
	}
}
</script>

Im Body steht:
HTML: 
<a href="eins.html">ein link</a><br />
<a href="test.html">zweite Link</a>

Und die Datei heißt test.html. Also sollte der zweite Link rot sein, ist er leider nicht.

Ich finde einfach nicht den Grund. Habe es schon zig male durchgelesen und mit der Zeitschrift verglichen.
 
1: Vertraue nicht allzuviel auf Codes aus Internet-Magazinen, das sind oft olle Kamellen die herhalten müssen um die Seiten vollzukriegen :-)

2: Keine Ahnung ob es im Magazin stand, aber das Skript muss im Dokument irgendwo hinter dem letzten Link stehen

3. Je nach Browser kann es vorkommen, dass getAttribute('href') wirklich nur das liefert, was dort steht und nicht den absoluten Pfad dorthin.
Da location.href aber den kompletten Pfad liefert, schlägt dann der Vergleich fehl.

Probiers so:
Code: 
<script type="text/javascript">
var anz = document.getElementsByTagName("a").length;

for (i=0; i<anz; i++)
{
    if (document.getElementsByTagName("a")[i].href == location.href)
    {
        document.getElementsByTagName("a")[i].style.color = "red";
    }
}
</script>

Das simple abfragen des href-Attributes liefert nach meiner Erfahrung immer den kompletten Pfad.
 
Danke dir Sven.

Mit dem leicht geänderten Skript funktioniert es. Im Magazin steht übrigens nicht, dass es nach dem letzten Link definiert werden muss. Nun gut, ist ja auch logisch, wenn man etwas mehr von JS versteht als ich;)
 
Wenn man das Script in eine Funktion packt und es dann per 'onload'-Eventhandler automatisch aufruft, kann das Script auch am Anfang stehen.
HTML: 
<html>
<head>
  <script type="text/javascript">
    function markActiveLinks() {
      ...
    }
    window.onload = markActiveLinks; // ohne Klammern ()!
  </script>
</head>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück