✔ DIV anzeigen onclick?

nordi

nordi

Erfahrenes Mitglied
Hi,

häufig diskutiertes Thema, ich weiß. Ich bekomm es aber nicht hin. Ich habe eine Navigation mit 4-5 Punkten. Jeder Punkt hat seinen eigenen Inhalt der in einem DIV-Container liegt. Bei Klick auf den Punkt1 soll der Inhalt 1 (DIV) eingeblendet werden, bei Klick auf Punkt2 soll der Inhalt 1 ausgeblendet und Inhalt 2 eingeblendet. Soviel zur Theorie ;) Hier mein Ansatz, der nicht funktioniert:

Code: 
// IM HEAD BEREICH
<script type="text/javascript"> 
            function anzeigen(das){ 
            for(i=1;i<=2;i++) {             
            document.getElementById(i).style.display='none';} 
             
               document.getElementById(das).style.display='block';} 
        </script>

HTML: 
// NAVIGATION
<a href="#" onclick="anzeigen('1')">Vita</a> | <a href="#" onclick="anzeigen('2')">Galerie</a>

//INHALT
<div id="1" style="display:none;">INHALT1</div>
<div id="2" style="display:none;">INHALT 2</div>

Was ist daran falsch? Wie kann ich den ersten Inhalt standardmäßig anzeigen lassen? Es gibt mit Sicherheit auch eine elegantere Lösung, denk ich. Bin für alles offen!
 
Funktioniert bei mir einwandfrei (Firefox und Opera).
Um Punkt eins standardmäßig anzuzeigen, setzt ihn halt auf display:block ;)

IDs dürfen keine Zahlen sein bzw. nicht mit diesen beginnen, das solltest du ändern. Aber das ändert nichts daran, dass dein geposteter Code bei mir 1 zu 1 funktionert.
 
Im Safari klappt er nicht :/ Das mit display:block hat funktioniert. Wie ändere ich das oben im Javascript um, dass ich nicht Zahlen benutzen muss?
 
Safari hab ich gerade nicht zur Hand. Vielleicht stört Safari sich an der ID.
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Div einblenden</title>

	<script type="text/javascript"> 
		/* <![CDATA[ */
		function anzeigen(das) {		
			for(i=1;i<=2;i++) {             
				document.getElementById('content'+i).style.display='none';
			} 
			 
			document.getElementById('content'+das).style.display='block';
		} 
		/* ]]> */
	</script>
</head>

<body>
	<a href="#" onclick="anzeigen(1)">Vita</a> | <a href="#" onclick="anzeigen(2)">Galerie</a>
	<div id="content1" style="display:block;">INHALT 1</div>
	<div id="content2" style="display:none;">INHALT 2</div>
</body>
</html>
 
Hi, danke für die schnelle Antwort. Also Vita (id=content1) wird jetzt automatisch eingeblendet. Wenn ich nun auf Galerie klicke, wird Vita auch ausgeblendet aber Inhalt2 (content2) wird nicht eingeblendet? Lag wohl wirklich an den ID, dass Safari das nicht mochte! Wo liegt denn jetzt der andere Fehler ;) ?
 
Vielleicht übergibst du als Parameter was falsches. Wenn du meinen Quelltext 1 zu 1 in eine Datei kopierst und im Browser ansiehst, funktioniert es (zumindest bei mir).
Falls du ihn abgeändert hast, musst du mal zeigen.
 
Es funktioniert alles wie es soll, aber innerhalb von "content2" hat ein weiteres div eine größe von 0 und ist deshalb nicht sichtbar.

HTML: 
<div class="jspContainer" style="width: 0px; height: 0px;">
 
Hey, dank dir! Ich versteh das aber nicht wirklich. Warum wird dann der content1 angezeigt?! Und wie kann ich das jetzt umgehen. Die Klasse jspContainer gehört zu dem jQuery Skript scrollPane, welches die Scrollbars an der Seite generiert.
 
Lass erstmal das scrollPane Skript weg, denn es scheint die Ursache für deine Probleme zu sein. Wenn es danach funktioniert, kannst du versuchen es wieder einzubauen. Ich tippe mal, dass das Plugin mittels width() und height() die größe ermittelt und dann die Scrollbalken erzeugt. Da content2 am Anfang aber schon unsichtbar ist, kommt da wohl 0 raus.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück