There are many different solutions for creating tabbed content in HTML pages. For a number of my apps, I needed a simple, lightweight solution that was easy to use and to integrate with my apps. I came up with a simple solution and am sharing it here. Hopefully someone will find it useful.
The solution consists of a table containing the tabs and DIV’s representing the content for each tab. The tabs table has one cell for each tab with ID of “Tab_n” where n starts with 0 and increases by 1 for each tab. Add an onClick handler for each cell that calls tabClickHandler(n). Finally, create a DIV for each tab’s content and set its ID to be “Panel_n” where n starts with 0 and increases by 1 for each tab. Add a style attribute of “display: none” for all DIVs representing the tab content except for the first, which should be set to “display:block”.
<script language="javascript">
function tabClickHandler(tab)
{
i = -1;
while (true)
{
i++;
objTab = eval(document.getElementById("Tab_" + i));
if (objTab)
{
objTab.className = (i == tab) ? "Speerio-SelectedTab" : ((i > tab)
? "Speerio-RightTab" : "Speerio-LeftTab");
document.getElementById("Panel_" + i).style.display = (i == tab ? "block" : "none");
}
else break;
}
}
</script>
<style>
.Speerio-Tabs { width:100%; color: black; font-family: Verdana,Arial,Helvetica,Sans Serif}
.Speerio-TabLeftSpacer {width:10%; BORDER-BOTTOM: 1px solid black}
.Speerio-TabRightSpacer {width:10%; BORDER-BOTTOM: 1px solid black}
.Speerio-SelectedTab { width:20%; BORDER-RIGHT: 1px solid black; BORDER-TOP: 1px solid black; BORDER-LEFT: 1px solid black}
.Speerio-LeftTab {cursor: hand; width:20%; BORDER-TOP: 1px solid #cccccc; BORDER-LEFT: 1px solid #cccccc; CURSOR: hand; BORDER-BOTTOM: 1px solid black; background-color: #eeeeee}
.Speerio-RightTab {cursor: hand; width:20%; BORDER-RIGHT: 1px solid #cccccc; BORDER-TOP: 1px solid #cccccc; BORDER-LEFT: medium none; CURSOR: hand; BORDER-BOTTOM: 1px solid black; background-color: #eeeeee}
.Speerio-TabLabel { font-size: 8pt; font-weight: bold; color: black; font-family: Verdana,Arial,Helvetica,Sans Serif}
</style>
<table cellspacing="0" cellpadding="2" border="0" align="center" class="Speerio-Tabs">
<tr>
<td class="Speerio-TabLeftSpacer"> </td>
<td id="Tab_0" class="Speerio-SelectedTab" nowrap align="Center" valign="Middle" onClick="tabClickHandler(0)">
<span class="Speerio-TabLabel">ABC</span></td>
<td id="Tab_1" class="Speerio-RightTab" nowrap align="Center" valign="Middle" onClick="tabClickHandler(1)">
<span class="Speerio-TabLabel">DEF</span></td>
<td id="Tab_2" class="Speerio-RightTab" nowrap align="Center" valign="Middle" onClick="tabClickHandler(2)">
<span class="Speerio-TabLabel">GHI</span></td>
<td id="Tab_3" class="Speerio-RightTab" nowrap align="Center" valign="Middle" onClick="tabClickHandler(3)">
<span class="Speerio-TabLabel">JKL</span></td>
<!-- Add as many additional cells corresponding to tabs here -->
<td class="Speerio-TabRightSpacer" align="right"> </td>
</tr>
</table>
<!-– Add a DIV for each tab’s content here -->
<div id="Panel_0" style="display:block" width="100%">Contents of the first tab</div>
<div id="Panel_1" style="display:none" width="100%">Contents of the second tab</div>
<div id="Panel_2" style="display:none" width="100%">Contents of the third tab</div>
<div id="Panel_3" style="display:none" width="100%">Contents of the fourth tab</div>