template

Index :: Javascript :: Menü :: Seiteninterne Tabs ( Demo)

Mit einem Tab-Control lässt sich umfangreicher Seiteninhalt thematisch gruppieren und individuell einblenden.

Benötigt wird lediglich eine zweizeilige Tabelle: Eine Zeile für die Tab-Reiter und eine Zeile für die Content-Zelle.
In dieser Content-Zelle befinden sich die DIV-Container (einer pro Tab), von denen jeweils nur einer - nämlich der des aktuellen Tabs - per DISPLAY-Eigenschaft sichtbar geschaltet ist.

Durch Klick auf eine Tab-Reiter-Zelle wird die Funktion DoTab() aufgerufen, welche dafür sorgt, dass sowohl der bisherige DIV unsichtbar als auch der neue DIV sichtbar wird. Ebenso erfolgt hier eine farbliche Änderung der jeweiligen Titel-Zellen, damit der aktuelle Tab als solcher immer erkennbar ist.
CSS im Header

TD.tab0 { BORDER-BOTTOM:1px solid #BBB; }
TD.tab0t { BACKGROUND:#D8D8D8;BORDER:1px solid;BORDER-COLOR:#BBB #000 #BBB #BBB;CURSOR:pointer; }
TD.tab1t { BACKGROUND:#EEE;BORDER:1px solid;BORDER-COLOR:#BBB #000 #EEE #BBB;FONT-WEIGHT:bold; }


Javascript im Header

function $(id) { return document.getElementById(id); }
var ActTab=0;
function DoTab(ix) { if (ix==ActTab) return; var o;
  (o=$('tdTab'+ActTab)).className='tab0t'; (o=$('tdTab'+ix)).className='tab1t';
  $('dvTab'+ActTab).style.display='none'; $('dvTab'+(ActTab=ix)).style.display=''; }


Weiter unten, im BODY, das Tab-Control:

<table cellspacing='0' cellpadding='2'>

Zeile mit Tab-Reitern:
<tr>
<td class='tab0'>&nbsp;</td>
<td id='tdTab0' class='tab1t' onClick='DoTab(0)'>Titel_1</td>
<td class='tab0'>&nbsp;</td>
<td id='tdTab1' class='tab0t' onClick='DoTab(1)'>Titel_2</td>
<td class='tab0'>&nbsp;</td>
<td id='tdTab2' class='tab0t' onClick='DoTab(2)'>Titel_3</td>
<td class='tab0' width='100%'>&nbsp;</td>
</tr>

Zeile mit Content-Zelle:
<tr><td colspan='7' style='BACKGROUND:#EEE;BORDER:1px solid;BORDER-COLOR:#EEE #000 #000 #BBB;'>


Container für Seite 1:
<div id='dvTab0'>

... Inhalt von Seite 1 ...
</div>


Container für Seite 2:
<div id='dvTab1' style='DISPLAY:none;'>

... Inhalt von Seite 2 ...
</div>


Container für Seite 3:
<div id='dvTab2' style='DISPLAY:none;'>

... Inhalt von Seite 3 ...
</div>

</td></tr></table>

Index :: Javascript :: Menü

template