dicon: 3 DIVs übereinander visible/hidden machen

Beitrag lesen

Hallo Klaus...

a) Unterscheidung von Zuweisung/Vergleich in JS
b) Attribute und Anführungszeichen
c) id-Vergabe

a) schau Dir das mal genauer an:
   www.infos24.de/javascripte/handbuch/11_js_bedingte_anweisungen.htm
b) Werte für Attribute (id, class...) immer in Anführungszeichen
c) IDs immer eindeutig vergeben - "rubrik_2" gibt's 2x

d) in Deinem Script-Block versuchst Du via getElementByID() das Element "rubrik__2" zu finden,
   das existiert nicht

Geschmackssache:

e) anstelle "visibility" würde ich "display" verwenden - schau Dir da ggf. mal die Unterschiede an
f) Style-Block -> .content -> ich würde hier "display:block" einfügen, damit brauchst Du dann
   im HTML-Teil keine weiteren style-Anweisungen mehr setzen. Wenn Du "visibility" weiterverwenden
   möchtest, "visibility ='visible'"

Ansonsten suchst Du ja nach einer Lösung... bin zwar kein Freund von vorgebastelten Sachen, aber sei
es drum:

============================= js snip begin =============================

1  ebene = function(id) {
2     evElem = document.getElementById(id);
3
4     if (!evElem) {
5        window.alert('func ebene: Element oder ID nicht vorhanden');
6     } else {
7        switch(evElem.id) {
8           case"rubrik_1":
9              document.getElementById('rubrik_1').style.display ='block';
10             document.getElementById('rubrik_2').style.display ='none';
11             document.getElementById('rubrik_3').style.display ='none';
12             break;
13          case"rubrik_2":
14             document.getElementById('rubrik_1').style.display ='none';
15             document.getElementById('rubrik_2').style.display ='block';
16             document.getElementById('rubrik_3').style.display ='none';
17             break;
18          case"rubrik_3":
19             document.getElementById('rubrik_1').style.display ='none';
20             document.getElementById('rubrik_2').style.display ='none';
21             document.getElementById('rubrik_3').style.display ='block';
22             break;
23       }
24    }
25 }

============================= js snip begin =============================

Zeile 1: nur eine andere Notation für eine Funktion... da ich nicht weiß, was du noch so vorhast
         könnte das später hilfreich sein
Zeile 2: holt sich das Element, was angeclickt wurde
Zeile 4: prüft, ob das Element überhaupt vorhanden ist und löst, wenn nicht, eine entsprechende
         Fehlermeldung aus. Es kann bei komplexen Sachen sehr hilfreich, wenn man weiß, wo's
         klemmt.

Zeile 6 bis 22:

In Deinem Fall wird die Verwendung von IF bzw. IF/ELSE oder IF/ELSE IF/.../ELSE zur Verarbeitung
bedingter Anweisungen schnell unübersichtlich - bei 3 Rubriken geht das grad noch, kommen später
ein paar dazu...

Ich habe hier mit der SWITCH Anweisung gearbeitet, schon komfortabler und für Dich einfacher
nachzuvollziehen, was passiert. Es geht noch einfacher, vor allem wenn es wirklich mehr Rubriken
werden. Da Du mit einem einheitlichen Class-Attribut arbeitest, bietet es sich an, die Anweisung
in eine FOR-Schleife zu packen. Wie das funktioniert, findest Du an allen Ecken im Netz.

Den HTML-Code kannst Du im Grunde so lassen, wenn Du die Hinweise a) bis f) von oben berücksichtigst
und entsprechend anpasst.

Grüße, dicon