Posts Tagged “HTML”

Hallo zusammen,

da ich mich jetzt mit einem Thema rumgeschlagen habe und immer wieder tolle Foren-Beiträge fand wo drin stand: “Ich habe ein Problem” …. “hab das Problem selber gelöst” … aber die Lösung wird nicht veröffentlicht. Deshalb werde ich hier mal meine Lösung präsentieren.

Folgendes Problem:
Ich habe auf einer Seite ein paar Hyperlinks (Anzahl ist egal), wenn ich auf diese Links drauf Klicke soll eine Ebene mit einem Text angezeigt werden. Meine Überlegung war es das ganze mit JavaScript zu machen damit die Seite nicht neu geladen werden muss. Nach kurzem stöbern unter google.de fand ich auch schon das passende.

Ebene anzeigen:

1

document.getElementById('EbenenName').style.display = 'block';

Ebene ausblenden:

1

document.getElementById('EbenenName').style.display = 'none';

Das Problem bestand jetzt nur das ich für jeden Link die Zeilebene einblenden und alle anderen Ebenen ausblenden musste, was wie folgt aussah:

1
2
3
4

<a href="javascript:show('Unterpunkt1'); 
                    hide('Unterpunkt2'); 
                    hide('Unterpunkt3'); 
                    hide('Unterpunkt4');">test - Unterpunkt1</a>

show() ist die Funktion um die Ebene anzuzeigen und hide() um sie auszublenden. Unterpunkt1/2/3/4 sind die Namen der Ebenen 1-4.
Diese Lösung war aber sehr unschön, da jeder Link “seine” Ebene einschalten und alle anderen ausschalten musste und somit der Code für jeden Link verlängert wird.

Daraufhin bin ich folgende Lösung gestoßen:

1
2
3
4
5
6
7
8
9

function show(ID)
{
	var divs = document.getElementsByTagName('div');
	for (var i = 0; i < divs.length; i++) {
		document.getElementsByTagName('div')[i].style.display = 'none';
	}
	showSite();
	document.getElementById(ID).style.display = 'block';
}

diese Funktion blendet erst alle Ebenen aus und zeigt dann nur die an, die übergeben wird.
Die Funktion showSite (Zeile 7) blendet nur die einzelnen Ebenen ein, die dauerhaft angezeigt werden sollen.

Dadurch kann man beliebig viele Links haben die wie folgt aussehen müssen:

1

<a href="javascript:show('Unterpunkt1')">test - Unterpunkt1</a>