Was Du brauchst:

HTML/CSS-Kenntnis und -Verständnis setze ich voraus!

Auch das lässt sich anders - ohne jQuery - umsetzen, jedoch finde ich es so am geschicktesten und einfachsten.

Zunächst einmal muss jQuery in die Seite eingebunden werden. Das Script kannst du auf der offiziellen Seiten herunterladen. Dieser Befehl kommt dann in den Head-Bereich der Seite:

<script type="text/javascript" src="jquery.js"></script>

(Fast) alles, was dann noch benötigt wird, ist dieses Script, ebenfalls im Head:

<script type="text/javascript">
$(document).ready(function() {
$(′#container div′).hide(); //versteckt alle divs innerhalb des #containers
$(′div.tab1′).show(); //ausgenommen das mit der Klasse .tab1, dieses wird als erstes angezeigt
$(′li.tab1 a′).addClass(′tab-offen′); //dem Link zu Tab 1 wird die Klasse .tab-offen hinzugefügt

$(′#container ul li a′).click(function(){ //wenn einer der Tab-Links geklickt wird
var id = this.className.slice(0,4); //holt sich das, was in der Klasse des gedrückten Links an Zeichenstelle 0 bis 4 ("tabn") steht und speichert es als Variable "id" ab
$(′#container div′).hide(); //bisher gezeigtes div (Tab) wird versteckt - überdeckt sonst andere Tabs
$(′div.′ + id).show(); //div mit der zwei Zeilen zuvor geholten Klasse wird gezeigt
$(′#container ul.tabs li a′).removeClass(′tab-offen′); //entfernt .tab-offen vom Link zum vorher gezeigten Tab
$(this).addClass(′tab-offen′); //...und fügt es zum aktuell offenen Tab hinzu
});
});
</script>
Ich hoffe, die Erklärungen zu den einzelnen Zeilen erscheinen jedem logisch :-)

Wichtig ist noch, dass per CSS die divs, welche zu Anfang nicht gezeigt werden sollen, zusätzlich versteckt werden - Sicherheitsmaßnahme.
div.tab2, div.tab3, div.tab4, div.tab5 {
display: none;
}
Natürlich müssen, damit die Seite dann aussieht wie in der Demo, noch weitere CSS-Anpassungen vorgenommen werden. Meine vollständige CSS sieht so aus:
body {
font: 15px/1.5 Helvetica, Arial, sans-serif;
text-align: justify;
}

#container {
margin: 150px auto;
width: 400px;
}

#container ul.tabs {
width: 100%;
margin: 0;
padding: 0;
}

ul.tabs li {
background: #870201;
float: left;
list-style: none;
margin: 0 5px;
padding: 10px 12px;
}

ul.tabs li a.tab {
color: #fff;
font-weight: bold;
text-decoration: none;
}

ul.tabs li a.tab:hover {
color: #aaa;
}

li a.tab-offen {
font-style: italic;
}

#container div {
background: #aaa;
display: block;
float: left;
padding: 10px;
}

div.tab2, div.tab3, div.tab4, div.tab5 {
display: none;
}

Der HTML-Teil sieht dann bei mir folgendermaßen aus:
<div id="container">

<ul class="tabs">
<li class="tab1"><a href="#" class="tab1 tab" title="Tab 1">Tab 1</a></li>
<li class="tab2"><a href="#" class="tab2 tab" title="Tab 2">Tab 2</a></li>
<li class="tab3"><a href="#" class="tab3 tab" title="Tab 3">Tab 3</a></li>
<li class="tab4"><a href="#" class="tab4 tab" title="Tab 4">Tab 4</a></li>
<li class="tab5"><a href="#" class="tab5 tab" title="Tab 5">Tab 5</a></li>
</ul>

<div class="tab1">
<h2>Inhalt Tab 1</h2>
<p>text tab 1</p>
</div>

<div class="tab2">
<h2>Inhalt Tab 2</h2>
<p>text tab 2</p>
</div>

<div class="tab3">
<h2>Inhalt Tab 3</h2>
<p>text tab 3</p>
</div>

<div class="tab4">
<h2>Inhalt Tab 4</h2>
<p>text tab 4</p>
</div>

<div class="tab5">
<h2>Inhalt Tab 5</h2>
<p>text tab 5</p>
</div>

</div>

Eine komplette Demo dessen findest du hier. Darin den vollständigen Quelltext zu betrachten ist vielleicht keine schlechte Idee - hier wird das ganze aufgrund des mangelnden Syntax-Highlighting leider nicht ganz so übersichtlich dargestellt.
Bei weiteren Fragen stehe ich gerne zur Verfügung! :-)