HTML Tabs sollen Inhalt dynamisch laden

[gammelfleisch]

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:

<div id="header"> 

<link rel="stylesheet" type="text/css" href="style.css">

<h1>Tabs</h1>
<ul>
	<li><a href="#running">Running</a></li>
	<li><a href="#scheduled">Scheduled</a></li>
	<li><a href="#finished">Finished</a></li>
</ul>

</div>

<div id="running">
	<script language="JavaScript">
	alert('running');
	</script>
</div>

<div id="scheduled">
	<script language="JavaScript">
	alert('scheduled');
	</script>
</div>

<div id="finished">
	<script language="JavaScript">
	alert('finished');
	</script>
</div>

Was mache ich falsch?

 

[toney]

Versuchs besser mit onclick="document.getElementById" ;)

 

[gammelfleisch]

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

<div id="header"> 

<link rel="stylesheet" type="text/css" href="style.css">

<h1>Tabs</h1>
<ul>
	<li><a href="#running" onclick="document.getElementById('running');">Running</a></li>
	<li><a href="#scheduled">Scheduled</a></li>
	<li><a href="#finished">Finished</a></li>
</ul>

</div>

<div id="running">
	<script language="JavaScript">
	alert('running');
	</script>
</div>

<div id="scheduled">
	<script language="JavaScript">
	alert('scheduled');
	</script>
</div>

<div id="finished">
	<script language="JavaScript">
	alert('finished');
	</script>
</div>

Trotzdem öffnen sich drei alert-Meldungen :sad:

 

[toney]

<div id="header"> 

<link rel="stylesheet" type="text/css" href="style.css">

<h1>Tabs</h1>
<ul>
	<li><a href="" onclick="document.getElementById('running').style.visibility='visible';">Running</a></li>
	<li><a href="" onclick="document.getElementById('scheduled').style.visibility='visible';">Scheduled</a></li>
	<li><a href="" onclick="document.getElementById('finished').style.visibility='visible';">Finished</a></li>
</ul>

</div>

<div id="running" style="visibility:hidden;">
	<script language="JavaScript">
	alert('running');
	</script>
</div>

<div id="scheduled" style="visibility:hidden;">
	<script language="JavaScript">
	alert('scheduled');
	</script>
</div>

<div id="finished" style="visibility:hidden;">
	<script language="JavaScript">
	alert('finished');
	</script>
</div>

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.

 

[threadi]

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.

 

[gammelfleisch]

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?

 

[threadi]

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

 

[gammelfleisch]

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