HTML Tabs sollen Inhalt dynamisch laden

Hallo,

Ich habe eine Beispiel CSS aus dem Netz genommen, mit der eine Art Tabstyle erstellt wird:

#header li {
	display: inline;
	border: solid;
	border-width: 1px 1px 0 1px;
	margin: 0 0.5em 0 0;
}

#header li a {
	padding: 0 1em;
}

#header li {
	float: left;
	border: 1px solid;
	border-bottom-width: 0;
	margin: 0 0.5em 0 0;
}

#content {
	border: 1px solid;
	clear: both;
}

h1 {
	margin: 0;
	padding: 0 0 1em 0;
}

#header #selected {
	position: relative;
	top: 1px;
	background: white;
} 

Nun möchte ich, je nachdem, auf welchen Tab man klickt, ein anderer Inhalt mit JS geladen wird, aber leider wird der Inhalt aller Tabs gleich am Anfang geladen:

[HTML]

Tabs

[/HTML]

Was mache ich falsch?

Versuchs besser mit onclick=„document.getElementById“ :wink:

Meinst du damit, dass ich es im -Tag machen soll, also so:

[HTML]

Tabs

[/HTML]

Trotzdem öffnen sich drei alert-Meldungen :sad:

[CODE]

Tabs

[/CODE]

Du musst mit onclick den Style deiner div’s verändern. Die sind zunächst versteckt und werden dann per Klick auf den jeweiligen Link eingeblendet.

Das wird aber auch nicht verhindern, dass 3 alert-Fenster aufgehen. Die werden logischerweise sofort angezeigt wenn die Seite geladen wurde. Sie stehen ja im Quellcode.

Wenn Du 3 Tabls erstellen willst, verwende nicht JavaScript um deren Aktivität oder Inaktivität anzuzeigen. Setze lieber eine Hintergrundfarbe per CSS.

Hallo,

wie soll ich den Inhalt sonst zeigen? Der Inhalt ist HTML-Code, der durch JavaScript erzeugt werden muss. Wie kann ich das nun machen, ohne dass gleich alle JavaScipt Blöcke ausgeführt werden?

Wenn Du HTML-Code in die Seite einbinden willst, verwende nicht die alert()-Funktion. HTML-Code kann mit innerHTML, mit document.write() oder per direkte Bearbeitung im DOM eingefügt werden. Für Dich wäre innerHTML oder document.write() sicher die schnellste Lösung. Siehe:
SELFHTML: JavaScript / Objektreferenz / all
SELFHTML: JavaScript / Objektreferenz / document

Danke für die Tipps, klappt nun wunderbar!:smiley: Die alert Geschichte hatte ich nur zum Testen gemacht. Habe nun eine externe js-Datei, die mittels DOM die HTML-Seite generiert.