Aktuelle Seite in der Navi hervorheben >> Problem bei Submenü

[loooop]

Hallo,
Ich habe folgendes Problem:
In einer Navigation auf meiner neuen Webseite soll der Link zur aktuelle Seite  ein andere Farbe haben. Dazu habe ich diesen Skript benutzt:

<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.backgroundColor = "black";  
		document.getElementsByTagName("a")[i].style.color = "white";  
    }  
}  
  
</script>

Soweit so gut, aber...
ich habe noch ein Submenü, dass unter einem "Hauptlink" steht.
Wenn die aktuelle Seite sich in der Navigation im Submenü befindet soll NUR der "Hauptlink" hervorgehoben werden.
Ich habe es schon versucht, aber ich komme nicht sehr weit.
HIer der 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)  
    {  
		if (location.href == 'file:///D:/geheim/submenuseite.html' || (usw..))  
		{?????}  
  
		else 		{  
        document.getElementsByTagName("a")[i].style.backgroundColor = "black";  
		document.getElementsByTagName("a")[i].style.color = "white";}  
    }  
}  
  
</script>

Ich hoffe ihr versteht mich einigermaßen :D
Viele Grüße
Julian

[Edgar Ehritt]

Hallo Julian,

zunächst eine Sache der Strukturierung: document.getElementsByTagName("a") erstellt eine Node-Liste aller Verweise eines Dokuments. Das ist, wenn Du auch innerhalb des 'eigentlichen' Inhalts Verweise hast, nicht sehr performant - ja kann im schlimmsten Fall sogar zu Kollisionen führen. Günstiger wäre es da ein das Menü umspannendes Element zu haben, in dem (nur) die Verweise des Menüs in der späteren Scriptverarbeitung durchsucht werden.

<element id="menu">  
 <!-- Menüverweise -->  
</element>  
<!-- Dokumenteninhalt -->

  
var liste=document.getElementById("menu").document.getElementsByTagName("a");  
var anz  =liste.length;  
  

> for (i=0; i<anz; i++)  
> {  

       if (liste[i].href == location.href);  

> }

Wenn die aktuelle Seite sich in der Navigation im Submenü befindet soll NUR der "Hauptlink" hervorgehoben werden.
Ich habe es schon versucht, aber ich komme nicht sehr weit.

Auch das ist nur eine Frage der Struktur und der daraus resultierenden Handhabung:

<ul id="menu">  
 <li>  
  <a href="hautmenu.htm" title="was weiß ich">WWI</a>  
  <ul>  
   <li>  
    <a href="submenu.htm">UM</a>  
   </li>  
   <!-- Andere Untermenüeinträge -->  
  </ul>  
 </li>  
 <!-- Andere Menüeinträge -->  
</ul>

Hierbei hat der Verweis im Untermenü innerhalb des DOM eine Beziehung zu seinem Hauptmenüverweis von liste[i].parentNode.parentNode.parentNode.getElementsByTagName('a')[0].

Wie Du siehst, ist hierbei wichtig, Deine genauen Vorstellungen vom Menü, also der Struktur, zu kennen, um die Beziehungen herzustellen!

Gruß aus Berlin!
eddi

[Elya]

Hallo loooop,

Ich hoffe ihr versteht mich einigermaßen :D

ich verstehe schon, was Du meinst, allerdings finde ich Deine Herangehensweise ein wenig exotisch ;-)

Grundsätzlich ist die aktuelle Seite überhaupt nicht zu verlinken (wo sollte sie denn auch hinführen?) und kann damit ganz einfach per CSS anders formatiert werden.

Wenn Du es unbedingt mit Javascript machen willst, könntest Du den top- und submenu-items eine eigene Klasse mitgeben und diese per Javascript abfangen (http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=classname@title=classname) (es gibt sicher noch elegantere JS-Methoden, um mit weniger oder keinen Klassen auszukommen, dies nur als Beispiel). Aber wie gesagt, das ist eigentlich ziemlich umständlich und unnötig.

Gruß aus Köln-Ehrenfeld,

Elya