Felix Riesterer: Zwei Scripts zu einem?

Beitrag lesen

Arrrrgh, schon wieder zu frühg abgeschickt...

Wie Du siehst, habe ich nicht nur die HTML-Struktur korrigiert, sondern beide Script-Bereiche zu einem zusammengefasst. Dass ich dabei diverse Variablen mit "var" zu lokalen Variablen gemacht habe, war zwar sinnvoll, hier aber nicht so wichtig. Wie ich auch in meiner ersten Antwort geschrieben habe, musste das onload-Attribut des (einzigen!!!) <body>-Tags mit beiden Funktionsaufrufen befüllt werden.

Es geht bestimmt einfacher oder??
Sorry, aber wie gesagt: ich bin totaler Anfänger....

Ja, es geht einfacher. Da Du die Listen (<ul>) innerhalb der Tabellenzelle hast, kannst Du vollkommen auf die DIVs verzichten. Ich bin sogar der Meinung, dass man sich darüber Gedanken machen könnte, ob eine Tabelle als Strukturelement unbedingt sein muss, denn Deine Termineliste ist ja eigentlich eine _Liste_... Und in einer Liste kannst Du dann das jeweilige <li>-Element als Elternelement für Deine Termine nehmen. Anstatt diesen Code

<table>
    <tr>
        <td valign="top"><div id="20080404">
            <a href="#" onclick="aufzu('submenue1'); return false">04.04.2008 - Termin 1</a>
                <ul id="submenue1">
                    <li>Beginn 15 Uhr</li>
                  <li>Ort: Berlin</li>
              </ul>
          </div></td>
      </tr>

kannst Du diesen nehmen:

<ul>  
    <li class="termin">  
        <a href="#" onclick="return aufzu(this)" title="für Details anklicken...">04.04.2008 - Termin X</a>  
        <ul class="zu">  
            <li>Beginn 15 Uhr</li>  
            <li>Ort: Berlin</li>  
        </ul>  
    </li>  
    <li class="termin">  
        <a href="#" onclick="return aufzu(this)" title="für Details anklicken...">05.04.2008 - Termin Y</a>  
        <ul class="zu">  
            <li>Beginn 9.30 Uhr</li>  
            <li>Ort: Hamburg</li>  
        </ul>  
    </li>  
</ul>

Natürlich müssten dann alle Deine Funktionen umgeschrieben werden, aber der Code Deiner Seite würde dadurch wesentlich schlanker - und meiner Meinung nach auch semantischer.

Durch die Klassen ist auch das Aktualisieren ziemlich gut machbar, da man über die Klasse "termin" leicht an die jeweiligen <li>-Elemente kommt (im Forumsarchiv wurde schon des Öfteren eine Funktion getElementsByClassName vorgestellt), und da beim onclick das jeweilige angeklickte HTML-Element (<a>) übertragen wird, kann man dann über DOM-Methoden die im selben Elternelement (<li>) befindliche Liste (<ul>) behandeln und ihr eine andere Klasse zuweisen (z.B. mit a.parentNode.getElementsByTagName("ul")[0]).

Wenn die Klassen im CSS-Code vernünftig formatiert sind, erhälst Du genau das, was Du willst. Du kannst sogar mit Hintergrundbildern das Anklicken der Termine unterstützen!

Liebe Grüße aus Ellwangen,

Felix Riesterer.

--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)