nicht angemeldet
objs[nr].style.display = "block" Probl. beim IE6
Moin!
Ich tüftele an einem kleinen Problem herum und muss aber dabei sagen, dass ich in JS noch nicht sehr sattelfest bin bzw. erst bei den ersten Gehversuchen.
Ausgangslage:
Es soll für eine linke Navigationsleiste mit reinem Text (der später auch noch mit css schön gemacht wird) eine Möglichkeit geschaffen werden, Menüeinträge in zwei oder höchstens drei Ebenen zu verwalten, wobei die beim Überrollen des Eintrags der Ebene1 die Untermenüs nur der Ebene1 sichtbar werden. Rollt man dann über den nächsten Eintrag der Ebene1, werden die Untermenüs des ersten Eintrags geschlossen und stattdessen die des zweiten geöffnet.
Also nichts neues, nur das dies sonst überwiegend mit click erledigt wird, was aber das prinzipielle Problem sicherlich nicht berührt.
Problemstellung:
Auf Vorschlag von Manuel habe ich den im folgenden Listing (aufs wesentliche reduziert) genannten Code ausprobiert und auch schon modifiziert, bis ich merkte, dass er nicht im IE6 funktioniert.
Dort treffe ich beim überrollen über einen Menüeintrag auf die Fehlermeldung:
'objs[...].style' ist null oder kein Objekt.
Das betrifft die Zeile:
objs[nr].style.display = "block";
Hat jemand eine Idee (oder gar eine Lösung), welche Alternative man dann für den IE6 verwenden kann (dann würde ich eine Browserweiche einbauen) oder sogar einen Vorschlag, der ohne Browserweiche für NC6 und IE6 funktioniert?
Da die Seiten später nur im Intranet einer geschlossenen Benutzergruppe zur Verfügung stehen, werden nur die beiden Versionen benötigt.
Vielen Dank für Unterstützung.
Gruß, Frank.
___________________________________________
<html>
<head>
<style type="text/css">
ul.Menu { display:none;}
</style>
</head>
<body>
<script type="text/javascript">
function setVisible( nr ){
objs = document.getElementsByName( "Menu" );
// Erst alle unsichtbar machen
for( i = 0; i < objs.length; i++ ){
objs[i].style.display = "none";
}
// Das gewünschte sichtbar machen
objs[nr].style.display = "block";
}
</script>
<ul>
<li class="alle" ><a href="#" onMouseOver="setVisible(0);" onClick="return false;">Auto</a>
<ul name="Menu" class="Menu">
<li><a href="" target="">Audi</a></li>
<li><a href="" target="">BMW</a></li>
<li><a href="" target="">Fiat</a></li>
<li><a href="" target="">Mercedes</a></li>
</ul></li>
<li li class="alle"><a href="#" onMouseOver="setVisible(1);">Garten</a>
<ul name="Menu" class="Menu">
<li><a href="" target="">Rasen</a></li>
<li><a href="" target="">Blumen</a></li>
<li><a href="" target="">Gemüse</a></li>
<li><a href="" target="">Bäume</a></li>
</ul></li>
<li li class="alle"><a href="#" onMouseOver="setVisible(2);">Urlaub</a>
<ul name="Menu" class="Menu">
<li><a href="" target="">Hintertux</a></li>
<li><a href="" target="">Bretagne</a></li>
<li><a href="" target="">Toskana</a></li>
<li><a href="" target="">Schottland</a></li>
</ul></li>
</ul>
</body>
</html>
-
Hallo,
Problemstellung:
Auf Vorschlag von Manuel habe ich den im folgenden Listing (aufs wesentliche reduziert) genannten Code ausprobiert und auch schon modifiziert, bis ich merkte, dass er nicht im IE6 funktioniert.
Dort treffe ich beim überrollen über einen Menüeintrag auf die Fehlermeldung:
'objs[...].style' ist null oder kein Objekt.Die Methode getElementsByName() kann/sollte nur Referenzen auf Elemente liefern, die auch ein Attribut name besitzen koennen: a, input, img, select, ...
objs = document.getElementsByName( "Menu" );
Modifiziere:
objs = document.getElementById("abc").getElementsByTagName("ul");
...
<ul>
Hier hinzufuegen:
<ul id="abc">
</ul>
MfG, Thomas
-
[Nachtrag:]
Modifiziere:
objs = document.getElementById("abc").getElementsByTagName("ul");
Ohne Extra-ID ist der Zugriff auch so moeglich:
objs = document.getElementsByTagName("ul")[0].getElementsByTagName("ul");
(Alle ul-Elemente, die sich unterhalb des ersten ul-Elements befinden.)
Wenn es mehrere verschachtelte ul-ul-Bloecke gibt, dann ist die Loesung mit IDs aber praktikabler.
MfG, Thomas
-
Modifiziere:
objs = document.getElementById("abc").getElementsByTagName("ul");Hier hinzufuegen:
<ul id="abc">
</ul>
Hallo Thomas,
habe es ausprobiert, aber leider ohne Erfolg. Beim IE6 erscheint die gleiche Fehlermeldung und beim NC6 rollen die Menüs nicht mehr aus...
Dennoch vielen Dank für den Tip.
Gruß, Frank.
-
Hallo,
habe es ausprobiert, aber leider ohne Erfolg. Beim IE6 erscheint die gleiche Fehlermeldung und beim NC6 rollen die Menüs nicht mehr aus...
Du hast es offenbar nicht richtig uebernommen, so klappt es bei mir unter IE 6 und Mozilla 1.2.1:
<html>
<head>
<style type="text/css">
ul.Menu { display:none;}
</style>
</head><body>
<script type="text/javascript">
function setVisible( nr ){
// objs = document.getElementsByName( "Menu" );
objs = document.getElementById("abc").getElementsByTagName("ul");// Erst alle unsichtbar machen
for( i = 0; i < objs.length; i++ ){
objs[i].style.display = "none";
}
// Das gewünschte sichtbar machen
objs[nr].style.display = "block";
}
</script><ul id="abc">
<li class="alle" ><a href="#" onMouseOver="setVisible(0);" onClick="return false;">Auto</a>
<ul class="Menu">
<li><a href="" target="">Audi</a></li>
<li><a href="" target="">BMW</a></li>
<li><a href="" target="">Fiat</a></li>
<li><a href="" target="">Mercedes</a></li>
</ul></li>
<li class="alle"><a href="#" onMouseOver="setVisible(1);">Garten</a>
<ul class="Menu">
<li><a href="" target="">Rasen</a></li>
<li><a href="" target="">Blumen</a></li>
<li><a href="" target="">Gemüse</a></li>
<li><a href="" target="">Bäume</a></li>
</ul></li>
<li class="alle"><a href="#" onMouseOver="setVisible(2);">Urlaub</a>
<ul class="Menu">
<li><a href="" target="">Hintertux</a></li>
<li><a href="" target="">Bretagne</a></li>
<li><a href="" target="">Toskana</a></li>
<li><a href="" target="">Schottland</a></li>
</ul></li>
</ul></body>
</html>BTW: Das Script wuerde ich eher im HEAD anlegen, aber es wird auch an dieser Stelle im BODY noch frueh genug gelesen.
MfG, Thomas
PS: Deine komischen <li li-Konstrukte habe ich korrigiert.
-
-