Achso, du meinst so eine Tabelle, die wie eine Kartei funktioniert

Auf der Seite ist das eigentlich so gemacht, dass man beim Anklicken von einer Zelle auf eine neue Seite weitergeleitet wird, aber ich habe dir das Gaze mit Javascript gemacht (da brauchst du keine neuen Seiten zu laden)
Das ist der Code:
<table border="0" width="500" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<table border="0" width="100%" cellspacing="1" cellpadding="0">
<tr>
<td width="20%" id="Eins" align="center" bgcolor="#666666" onclick="javascript:Auswahl(this,0)" style="height: 24px; color: #FFFFFF; cursor: hand"><font face="Arial" size="2">Kategorie 1</font></td>
<td width="20%" align="center" bgcolor="#666666" onclick="javascript:Auswahl(this,1)" style="height: 24px; color: #FFFFFF; cursor: hand"><font face="Arial" size="2">Kategorie 2</font></td>
<td width="20%" align="center" bgcolor="#666666" onclick="javascript:Auswahl(this,2)" style="height: 24px; color: #FFFFFF; cursor: hand"><font face="Arial" size="2">Kategorie 3</font></td>
<td width="20%" align="center" bgcolor="#666666" onclick="javascript:Auswahl(this,3)" style="height: 24px; color: #FFFFFF; cursor: hand"><font face="Arial" size="2">Kategorie 4</font></td>
<td width="20%" align="center" bgcolor="#666666" onclick="javascript:Auswahl(this,4)" style="height: 24px; color: #FFFFFF; cursor: hand"><font face="Arial" size="2">Kategorie 5</font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" align="center" bgcolor="#EEEEEE" style="height: 60px">
<form name="Inhalt" action="" style="display: none"><font face="Arial" size="2">Inhalt 1</font></form>
<form name="Inhalt" action="" style="display: none"><font face="Arial" size="2">Inhalt 2</font></form>
<form name="Inhalt" action="" style="display: none"><font face="Arial" size="2">Inhalt 3</font></form>
<form name="Inhalt" action="" style="display: none"><font face="Arial" size="2">Inhalt 4</font></form>
<form name="Inhalt" action="" style="display: none"><font face="Arial" size="2">Inhalt 5</font></form>
</td>
</tr>
</table>
<script type="text/javascript">
<!--
var Kategorien = new Array();
var ausgewaehlt = 0;
if(document.getElementById)
{
Kategorien[0] = document.getElementById("Eins");
Kategorien[0].style.color = "#333333";
Kategorien[0].style.backgroundColor = "#00FF00";
document.Inhalt[0].style.display = "";
}
else
ausgewaehlt = -1;
function Auswahl(Objekt,Objektindex)
{
if(!Kategorien[Objektindex])
Kategorien[Objektindex] = Objekt;
if(ausgewaehlt>-1)
{
Kategorien[ausgewaehlt].style.color = "#FFFFFF";
Kategorien[ausgewaehlt].style.backgroundColor = "#666666";
document.Inhalt[ausgewaehlt].style.display = "none";
}
Kategorien[Objektindex].style.color = "#333333";
Kategorien[Objektindex].style.backgroundColor = "#00FF00";
document.Inhalt[Objektindex].style.display = "";
ausgewaehlt = Objektindex;
}
//-->
</script>
Beim Anklicken einer Zelle wird der entsprechende Inhalt sichtbar gemacht. Wenn du eine Kategorie hinzufügen möchtest, fügst du bei den Zellen in dem
table einfach eine neue Zelle ein (kopiere am Besten eine von den bereits vorhandenen Zellen).
Was beim Hinzufügen sehr wichtig ist, ist die
rot geschriebene Indexnummer für die Zellen. Diese Nummer musst du anpassen, weil sie angibt, um die wievielte Zelle es sich handelt (Zählung beginnt bei
0, daher hat die erste Zelle eine
0, die Zweite Zelle eine
1, usw). Entsprechend dieser Nummer wird nämlich die Zelle grün eingefärbt und deren Inhalt sichtbar gemacht.
In den
blau geschriebenen Bereichen kommt der Inhalt hin, der beim Klick auf die entsprechende Zelle erscheint.
Dieses Javascript funktioniert in allen Browsern, die CSS können. Browser, die
getElementById() unterstützen, färben beim Laden der Seite automatisch die erste Zelle grün ein und lassen deren Inhalt erscheinen. W3C valide ist das Javascript natürlich auch
