✔ Vereinfachung möglich?

[Boof]

Hallo Leute,

ich habe hier eine kleine Seite.
Dort gibt es Links, wenn man nun auf einen Link raufklickt erscheint ein Div per Javascript.
Wenn man nun auf den nächsten Link klickt soll das vorherige Div wieder verschwinden und das neue soll angezeigt werden.
Vereinfacht: Es soll immer nur ein Div zur Zeit angezeigt werden.

Meine Funktion sieht so aus und damit bin ich überhaupt nicht zufrieden:

function show(nr) {
			if(nr == '1') {
				document.getElementById('Abteilung'+nr+'').style.display = 'block';
			}
			else{
				document.getElementById('Abteilung1').style.display = 'none';
			}
			if(nr == '2') {
				document.getElementById('Abteilung'+nr+'').style.display = 'block';
			}
			else{
				document.getElementById('Abteilung2').style.display = 'none';
			}
			if(nr == '3') {
				document.getElementById('Abteilung'+nr+'').style.display = 'block';
			}
			else{
				document.getElementById('Abteilung3').style.display = 'none';
			}
			if(nr == '4') {
				document.getElementById('Abteilung'+nr+'').style.display = 'block';
			}
			else{
				document.getElementById('Abteilung4').style.display = 'none';
			}
			if(nr == '5') {
					document.getElementById('Abteilung'+nr+'').style.display = 'block';
			}
			else{
				document.getElementById('Abteilung5').style.display = 'none';
			}
			if(nr == '6') {
				document.getElementById('Abteilung'+nr+'').style.display = 'block';
			}
			else{
				document.getElementById('Abteilung6').style.display = 'none';
			}
			if(nr == '7') {
				document.getElementById('Abteilung'+nr+'').style.display = 'block';
			}
			else{
				document.getElementById('Abteilung7').style.display = 'none';
			}
			if(nr == '8') {
				document.getElementById('Abteilung'+nr+'').style.display = 'block';
			}
			else{
				document.getElementById('Abteilung8').style.display = 'none';
			}
			if(nr == '9') {
				document.getElementById('Abteilung'+nr+'').style.display = 'block';
			}
			else{
				document.getElementById('Abteilung9').style.display = 'none';
			}
		}
		function hide(nr) {
			document.getElementById('Abteilung'+nr+'').style.display = 'none';
		}

Es muss doch möglich sein diese Funktion irgendwie zu vereinfachen damit nicht jedes einzelne Div abgefragt werden muss.

Der Aufruf des Div´s erfolgt hier:

area shape="rect" coords="285,73,396,60" alt="test" href="#" OnClick='show(1)' Ondblclick='hide(1)'/>

Ich hoffe irgendjemand kann mir helfen.

 

[Gumbo]

Durchlaufe lieber alle Elemente auf einmal:

function show(nr)
{
	for(var i=1; i<=9; i++) {
		hide(i);
	}
	if( document.getElementById('Abteilung'+nr) ) {
		document.getElementById('Abteilung'+nr).style.display = 'block';
	}
}

function hide(nr)
{
	document.getElementById('Abteilung'+nr).style.display = 'none';
}

 

[Boof]

Hi Gumbo,

danke für die schnelle Antwort.
Ja genau so wollte ich das haben^^ Ich muss mir jetzt nur noch die Funktion anschauen damit ich auch verstehe was da eigentlich passiert.

Nochmal Danke.

 

[Gumbo]

Das ist recht einfach: erst einmal werden alle Elemente durchlaufen und mit hide() versteckt. Das angegebene wird dann wieder angezeigt. Vielleicht sollte beim Verstecken der Elemente das angegebene noch übersprungen werden:

function show(nr)
{
	for(var i=1; i<=9; i++) {
		if( i == nr ) {
			continue;
		}
		hide(i);
	}
	if( document.getElementById('Abteilung'+nr) ) {
		document.getElementById('Abteilung'+nr).style.display = 'block';
	}
}

 

[Boof]

Hi,

alles klar habs kapiert das ist echt gut.
Leider komm ich nie selber auf sowas