Inhalt

Einleitung Voraussetzungen Pop Up, Pop down Flatter, flatter Vorhang auf! Klappe zu! Übersicht die HTML-Seite die Hyperlinks das Stylesheet Block-Elemente Gestaltung einrücken Script, Script, Hurrah einrichten zielen Schutt verschwindibus globale Werte Ereignisse wo bin ich? endlich ausklappen Moment noch! das ist die Höhe polieren Abschluss

---

Service

Kontakt & Feedback

CSS Anwendung

Klappe zu!

Script, Script, Hurrah

verschwindibus

Offenbar haben wir also in unserem Skript die Möglichkeit, einen Blick auf die Klasse eines Elements zu werfen. Das tun wir nun. Wir können nämlich bereits folgendes sagen:

• Wenn eine Class vorhanden ist, dann können wir doch vergleichen, ob ihr Name so anfängt, wie man's unserem Skript als zweites Element gesagt hat, also z.B. mit "stufe".
• Wenn das der Fall ist, können wir die Ziffer hinter diesem Namen begutachten.
• Ist diese Ziffer höher als 1, so können wir den Link ausblenden.

Und die alert-Meldung am Ende können wir auch gleich entfernen.

function klappmenu(mname,gname) {

  ganzesmenu = document.getElementById(mname) ;  // auf das Menü zielen
  for(i=0 ; i<ganzesmenu.childNodes.length ; i++) {
    dieseskind = ganzesmenu.childNodes[i] ;
    if(dieseskind.className) {
      if(dieseskind.className.substr(0,gname.length) == gname) {
        if(dieseskind.className.substr(gname.length,1) > "1") {
          dieseskind.style.display = "none" ;
        }
      }
    }
  }
}

Werfen wir noch einen kurzen Blick auf das, was neu ist:

• dieseskind.className.substr(0,gname.length) kann man von links nach rechts lesen:

  dieseskind	bezeichnet das Element, das uns interessiert	den Namen dieseskind haben wir selber erfunden und möglichst aussagekräftig gewählt.
  className	bezeichnet den Class-Namen von dieseskind	className ist eine Eigenschaft dieses HTML-Elements. Eigenschaften könne wir nicht frei erfinden, sondern müssen sie (und ihre Namen) kennen.
  substr	bedeutet, dass wir von diesem Namen nur einen Teil ansehen wollen	Hier handelt es sich um eine JavaScript-Funktion (für die Puristen: um eine Methode des String-Objekts). substr stammt also aus dem JavaScript-Vokabular.
  0	bedeutet, dass dieser Teil mit der ersten Position des Namens beginnt	substr beginnt jeweils mit 0 zu zählen
  gname.length	... und so lang sein soll, wie das Argument gname, das unserem Skript übergeben worden ist.	length ist eine Eigenschaft des String-Objekts und stammt aus den DOM-Spezifikationen (Document Object Model), die die Objekte eines HTML-Dokuments beschreiben.

  Im Klartext und für unser Beispiel bedeutet das "wenn der Classname mit 'stufe' anfängt".
• if(dieseskind.className.substr(gname.length,1) > "1")
  kann ganz analog interpretiert werden. Diesmal interessiert uns allerdings der Teil des Klassen-Namens, der nach 'stufe' folgt und 1 Zeichen lang ist.
• dieseskind.style.display = "none" ;
  ist einfach und effizient: Die style-Eigenschaft display des aktuellen Elements erhält den Wert none: Das Element wird nicht mehr angezeigt.

und das wär's nun.

Damit ist auch gezeigt, wie der Klappmechanismus funktionieren wird: Durch Ändern der display-Eigenschaft der Hyperlinks. Hier wird sich nicht mehr viel Neues tun; das ist der Ort, wo sich die HTML-Architektur, die CSS-Anzeigeeigenschaften und JavaScript treffen.

Im Weiteren geht es nun noch um zwei Schwerpunkte: Das Vervollständigen der ganzen JavaScript-Funktion und die Einführung von Ereignissen (Events).