Ajaxschmiede.de

Beim Stöbern durch die bunte Internetwelt stieß ich auf ein relativ einfaches Javascript-Tabmenü, das auf den Namen Tabtastic hört, und habe dazu ein eigenes Beispiel erstellt. Der Aufbau ist schnell erklärt.

Im HTML-Header werden folgende Javascript-Dateien verlinkt:

<script src="addclasskillclass.js" type="text/javascript"></script>
<script src="attachevent.js" type="text/javascript"></script>
<script src="addcss.js" type="text/javascript"></script>
<script src="tabtastic.js" type="text/javascript"></script>

In der tabtastic.js habe ich die 89. Zeile mit dem Aufruf der AddStyleSheet-Funktion auskommentiert und die css-Datei per Hand eingebunden.

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

Um Problemen mit der Schriftgröße aus dem Weg zu gehen, habe ich selbst noch einige css-Angaben in den HTML-Head eingefügt:

body {
	font-family:arial,serif;
	background-color:#eee;
}
.tabset_tabs {
	font-size: 15px;
	line-height: 115%;
}
#tabmenu div{
	width: 500px;
}

Man definiert in HTML eine Liste und steckt den Tabinhalt in div-Container. Das sieht dann wie folgt aus:

<ul class="tabset_tabs">
<li><a href="#tab1" class="active">Latein (alt)</a></li>
<li><a href="#tab2">Latein (neu)</a></li>

<li><a href="#tab3">Übersetzung</a></li>

<li><a href="#tab4">Autor</a></li>
</ul>
<div id="tab1" class="tabset_content">
<h2 class="tabset_label">Tab 1</h2>
<-- Inhalt -->
</div>
<div id="tab2" class="tabset_content">
<h2 class="tabset_label">Tab 2</h2>
<-- Inhalt -->
</div>
<div id="tab3" class="tabset_content">
<h2 class="tabset_label">Tab 3</h2>
<-- Inhalt -->
</div>
<div id="tab4" class="tabset_content">
<h2 class="tabset_label">Tab 4</h2>
<-- Inhalt -->
</div>

Das definierte h2-Element in den Containern wird intern benötigt, ist jedoch nicht sichtbar.