Ebenen ein- und ausblenden

[bce]

habe da ca. 4 div-tags, die mittels links ein- bzw. ausgeblendet werden können.

mit diesem javascript-code blende ich die entsprechenden divs ein bzw. aus:

Code: Alles auswählen

<script type="text/javascript">
//wenn DIV hidden -> sichtbar; und umgekehrt
function anzeigen(nr){
	if(document.getElementById(nr).style.display=='none') 
		document.getElementById(nr).style.display='block'; 
	else document.getElementById(nr).style.display='none';}
</script>

der aufruf sieht folgendermaßen aus:

Code: Alles auswählen

<a href="javascript:anzeigen('div2');">Link</a>

ziel: es soll immer nur eine ebene sichtbar sein, d.h. wenn ich auf einen anderen link klicke, dann soll der schon sichtbare div verschwinden...

wie kann man das ohne statische programmierung realisieren?
¢¦

[oxpus]

Für eine dynamische Anwendung solltest Du "this" an die Funktion übergeben.
"this" beinhaltet den aktuellen Node des Elements.

Man kann aber auch den einzelnen Ebenen eine ID zuweisen und diese der Funktion übergeben. Damit wird dann gezielt die betreffende Ebene mit dem Link geöffnet.
Wenn die Angelegenheit dynamisch erstellt wird, also z. B. durch ein PHP oder Perlscript, kann man die auch durchnummerieren (allerdings muss eine ID mit einem Buchstaben beginnen, um sauber zu coden!), damit man in einer Schleife alle anderen Ebenen schliesst und nur die eine Ebene öffnet.
In der Javascript-Funktion dann eine Schleife wie in folgendem Beispiel ausführen:

Code: Alles auswählen

for (var i = 0; i < elements.length; i++) {
if (i == cur) {
elements[i].style.display = 'none';
} else {
elements[i].style.display = '';
}
}

wobei cur die ID des Elements ist, elements dann das Element selber.
Da eine ID allerdings mit einem Zeichen beginnen muss, wäre es zur Prüfung zu berücksichtigen:

Code: Alles auswählen

cur = 'id_' + cur;

wobei 'id_' hier mal nur als Beispiel angenommen wurde.
Im HTML-Teil würde das betreffende Element z. B. so benannt:

Code: Alles auswählen

<div id="id_0">
....
</div>

elements würde aus der übergebenen ID erstellt.
Also in der Funktion würde das drinnen stehen:

Code: Alles auswählen

function open_close (element)

Element wird dabei aus "this" oder dem direkten ID-Bezeichner des Elements bestehen, der im Link zu packen wäre.

Soweit mal grob umrissen, was zu tun wäre.
Versuche es mal, vielleicht ist das schon ein ausreichender Denkanstoss

[bce]

danke schonmal für den anstoss

habe jetzt folgende funktion:

Code: Alles auswählen

function open_close(cur){
/* alt
	if(document.getElementById(cur).style.display=='none') 
		document.getElementById(cur).style.display='block'; 
	else document.getElementById(cur).style.display='none';
*/

	
for (var i = 1; i <= 6; i++) { 
//alert("i:" + i + "  cur: " + cur);
	if (i == cur) { 
			cur = 'div' + i;
			alert("if" + cur);
			document.getElementById(cur).style.display='block';
			}
		else {
			cur = 'div' + i; 
			alert("else" + cur);
			document.getElementById(cur).style.display='none';
	} 
}
}

eigentlich müßte es funktionieren, tuts aber nicht?!

-die for-schleife wird in diesem falle 6 mal durchlaufen
-dann wird der momentane zähler i mit dem parameter cur überprüft

beispiel klick auf ersten link:
aufruf mittels

Code: Alles auswählen

<a href="javascript:open_close('1');">Link</a>

funktionierts...

warum aber funktioniert das nur beim ersten link open_close('1') ?!
bei open_clode('2') ('3') usw. wird immer nur der else-zweig aufgerufen...
was hab ich da übersehen?
¢¦

[oxpus]

Ich kenne jetzt war nicht den Aufbau des gesamten Konstrukts, aber Du hattest die Variable cur in der Schleife verändert, also kann auch Unerwartetes dabei herauskommen.
Versuch es mal so:

Code: Alles auswählen

function open_close(cur){
/* alt
	if(document.getElementById(cur).style.display=='none') 
		document.getElementById(cur).style.display='block'; 
	else document.getElementById(cur).style.display='none';
*/

	
for (var i = 1; i <= 6; i++) { 
//alert("i:" + i + "  cur: " + cur);
	if (i == cur) { 
			alert('if div ' + i);
			document.getElementById('div'+i).style.display='block';
			}
		else {
			alert('else div ' + i);
			document.getElementById('div'+i).style.display='none';
	} 
}
}

[bce]

aber Du hattest die Variable cur in der Schleife verändert

... na klar.. jetzt mit ein bischen abtstand bin ich auch drauf gekommen.. oh mann

thx, funktioniert nun