In diesem Tutorial geht es darum, mehrere Tabs anzulegen, zwischen denen man blättern kann und deren jeweiliger Inhalt dabei dynamisch nachgeladen wird (blöd zu beschreiben; ich meine das, was ihr auf der Startseite von neontrauma.de seht :-) ).
Der Einfachheit halber werde ich das vorgehen anhand eines WordPress-Themes beschreiben, es funktioniert aber natürlich mit jeder beliebigen Seite.

wie geht’s & wer hat’s erfunden?

Das Zaubermittel heißt JavaScript, genauer gesagt: AJAX und jQuery.
Klaus Hartl vom Stilbüro hat diese Tab-Funktion entwickelt, die mittlerweile in der Version 3 vorliegt und über eine recht umfassende (allerdings englischsprachige) Dokumentation verfügt.

die benötigten JavaScript-Dateien

Zunächst einmal benötigen wir natürlich jQuery selber – herunterladen könnt ihr euch die aktuelle Version 1.2.6 hier. Aus dem breitgefächerten Angebot der jQuery UI-Bibliothek kommen dann noch die ui.core.js sowie die ui.tabs.js hinzu. Herunterladen könnt ihr euch diese hier, indem ihr in der Auswahlliste die beiden entsprechenden Häkchen setzt.
Diese drei Dateien ladet ihr auf euren Server und bindet sie im head-Bereich eurer Seite ein, damit euch die Scripte zur Verfügung stehen:
<script type="text/javascript" src="http://domain.de/jquery-1.2.6.js"></script>
<script type="text/javascript" src="http://domain.de/ui.core.js"></script>
<script type="text/javascript" src="http://domain.de/ui.tabs.js"></script>
Je nachdem, wie ihr euren Download gepackt habt, kann es sein, dass die ui.core.js und die ui.tabs.js in einem Package liegen – dann müsst ihr eben dieses Package einbinden.
(Unter WordPress bietet es sich an, im Ordner des jeweiligen Themes ein Verzeichnis namens js anzulegen und dort alle JavaScript-Dateien abzulegen – aber das kann man natürlich handhaben, wie man will.)
Dazu kommt der Aufruf des Scripts, den ihr ebenfalls in den head-Bereich notiert:
<script type="text/javascript">
$(function() {
$('#container ul').tabs({ fxFade: true, fxSpeed: 'fast' });

$('#container2 ul').tabs({ event: 'mouseover' }).find('a').click(function() {
return false;
});
});
</script>

die Navigation

Als nächstes legen wir die Navigation an, also die einzelnen Reiter, über die man die Tabs ansteuern kann.
Hier müsst ihr euch entscheiden: wollt ihr die Inhalte der Tabs alle zusammen in einer Datei speichern, oder soll in jedem Tab eine eigenständige Datei dynamisch nachgeladen werden?
Je nachdem unterscheidet sich das Aussehen der Links ein wenig. Das Grundgerüst bleibt jedoch gleich – eine ungeordnete Liste mit den einzelnen Reitern als Listenpunkt:

<ul>
<li><a class="ui-tabs" href="#erster-tab">erster Tab</a></li>
<li><a class="ui-tabs" href="#zweiter-tab">zweiter Tab</a></li>
<li><a class="ui-tabs" href="#dritter-tab">dritter Tab</a></li>
</ul>

Dies ist der Code für diejenige Variante, in der der Inhalt sämtlicher Tabs in der gleichen Datei steht und über Anker angesteuert wird. Wenn externe Dateien geladen werden sollen, ersetzt ihr das #erster-tab durch erster-tab.html (je nachdem, wo die Datei liegt und wie sie heißt, müsst ihr den Pfad natürlich anpassen).
Die Navigation sowie den Inhalt der Tabs (zu dem wir im nächsten Abschnitt kommen) packt ihr zusammen in ein Div und gebt ihm eine ID, beispielsweise container. Wichtig ist, dass diese ID dem Namen entspricht, mit dem die Liste in dem kleinen Script oben angesprochen wird.

der Inhalt der Tabs

In diesem Beispiel befinden sich die Inhalte aller Tabs in einer einzigen Datei (der gleichen, in der auch die obige Navigation liegt). Jeder Tab wird in ein Div gepackt – wichtig ist, dass die ID des Divs mit dem Linkziel der Navigation übereinstimmt.

<div id="erster-tab">
<h3>erster Tab</h3>
<p>Inhalt des ersten Tabs...</p>
</div>

<div id="zweiter-tab">
<h3>zweiter Tab</h3>
<p>Inhalt des zweiten Tabs...</p>
</div>

<div id="dritter-tab">
<h3>dritter Tab</h3>
<p>Inhalt des dritten Tabs...</p>
</div>

Diese Datei, also die Navigation mitsamt der Tab-Inhalte, speichert ihr als tabs.php ab und ladet sie in das Theme-Verzeichnis (also dahin, wo auch die index.php, header.php usw. liegen).

Jetzt wird die tabs.php an der gewünschten Stelle eingebunden. Im Fall von neontrauma.de ist dies in der index.php der Fall, da die Tabs nur auf der Startseite erscheinen sollen, aber selbstverständlich könntet ihr sie auch bereits in der header.php einbinden oder in jeder anderen beliebigen Datei. Wenn ihr WordPress nutzt, könnt ihr den Pfad zur Datei so angeben:
<?php include(TEMPLATEPATH . '/tabs.php'); ?>
Theoretisch müsst ihr den Code natürlich nicht auslagern, in Hinblick auf die Übersichtlichkeit eurer Dateien bietet sich das aber an.

das Stylesheet

Last but not least müsst ihr im Stylesheet eine Klasse hinzfügen, damit die Tabs funktionieren:
.ui-tabs-hide {
display: none;
}

Das Grundgerüst der Tab-Navigation steht nun – wenngleich die Links bis jetzt natürlich nicht wie Tabs aussehen, sondern einfache Listenpunkte sind. Auf das weitere Styling werde ich an dieser Stelle allerdings nicht eingehen, sondern verweise auf ein entsprechendes Tutorial, was ich vor einiger Zeit verfasst habe: Menue im Block-Style.