nicht angemeldet
Hallo Constella!
Ok, hab jetzt anstelle von display:normal display:list-item genommen
Funktioniert auch so weit ^^
Prima!
http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id
Hier weiß ich immer noch nciht, wie ich da genau vorgehen soll.
War mal so "primitiv" und hab anstelle von dem .all .getElemenById genutzt und sonst so gelassen wie alles da steht (ich denke mal fast, dass es nicht der richtige Lösungsansatz war ^^ - also des einfach da so reinschreiben )
Nein, einfaches Ersetzen kann nicht funktionieren.
Aber, wir wollen uns mal den gesamten Code anschauen und Schritt für Schritt vorgehen, ja?
Zunächst fehlt eine Doctype-Angabe zu Beginn des Dokuments. Zum Beispiel die:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Dann sollte man:
<script type="text/javascript">
verwenden anstelle von »language="JavaScript"«. Das ist nämlich veraltet und ohne die Type-Angabe ist das Dokument invalide.
Nach dem Einleitung des Skript-Blocks durch obige Zeile wird gleich eine Funktion deklariert, sie heißt roll(). Und sie erwartet einen Parameter, der zwischen den Klammern steht, hier also »num«.
Und was entspricht dieses »num«? In Deinem Code vom Ausgangsposting, siehst du, dass in den eröffnenden <span>-Tags im onclick-Attribut (BTW: onclick sollte man klein schreiben) die Funtkion roll() aufgerufen wird. Der Funktion wird ein Parameter übergeben, der die ID des jeweiligen span-Elements ist (beim allerersten also »m1«, beim zweiten »m2«, usw.).
Innerhalb der Funktion wird der Paramter gebraucht, um mittels document.all das Element mit der selben ID einzublenden (if-Zweig).
Nun wollen wir document.all nicht mehr verwenden und stattdessen getElementById(). Die ID des Elements, das es zu »getten« gibt, kommt zwischen den Klammern: getElementById("id_eines_elements") - und für eine direkte Verwendung zwischen Anführungszeichen. Da bei unserer Funktion aber eine Parameterübergabe stattfindet, dürfen hier keine Anführungszeichen verwendet werden. Sonst würde ein Element mit der ID »num« gesucht, und das gibt es ja nicht.
Hinter if und else sorgen geschweifte Klammer für einen besseren Überblick. Die neu geschriebene Funktion könnte also so aussehen:
function roll(num) {
if (document.getElementById(num).className=="weg") {
document.getElementById(num).className="da";
}
else {
document.getElementById(num).className="weg";
}
}
So, mit dem JavaScript-Bereich wären wir fertig, der wird durch </script> beendet. Jetzt widmen uns dem HTML-Teil.
Wenn Du Überschriften brauchst (sonst hättest Du sie nicht Überschrift1, usw. genannt), warum nicht gleich entsprechende Elemente benutzen? h1-h6 wurde dafür geschaffen!
Die span-Elemente werden überflüssig, der onclick-Händler weisen wir den Überschriften zu:
<h4 onclick="roll('m1')">Überschrift 1</h4><br>
<ul id="m1" class="weg">
<li><a href="http://www.freenet.de" target="_blank">freenet</a></li>
<li><a href="http://www.gmx.de" target="_blank">GMX</a></li>
<li><a href="http://www.google.de" target="_blank">Google</a></li>
</ul>
Es gibt sicher elegantere Umsetzungen, aber diese hier ist Deinem Ursprungscode nicht ganz unähnlich. Ferner kannst Du mittels CSS die Überschriften formatieren und auch die Trennlinien.
Ich steig da leider nicht so ganz hinter.
Nee _dahinter_ kann man nur steigen, wenn man _davor_ bei SELFHTML einsteigt (erst HTML/CSS, dann JavaScript), was Dir hiermit wärmstens empfohlen wird... ;)
Viele Grüße aus Frankfurt/Main,
Patrick
_ - jenseits vom delirium - _
[link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
Nichts ist unmöglich? Doch!
Heute schon gegökt?