Tabs and Tab Clicks

Overview: The following code snippet allows multiple tables to store content with only one table visible at a time and the others being hidden. The end effect is to have large amounts of data display in concise regions on the web page.

Design Specification Extreme Pro uses javascript tabs and tab clicks for his interface

<script language="javascript">

	function TabClick( nIndex )

	{

		nTab = parseInt(nIndex);

		var oTab;



		for (var i = 0; i < dataContent.length; i++)

		{

			oTab = tabs[i];

			oTab.className = "clsTab";

			oTab.style.borderLeftStyle = "";

			oTab.style.borderRightStyle = "";

			dataContent[i].style.display = "none";

		}

		dataContent[nIndex].style.display = "block";

		tabs[nIndex].className = "clsTabSelected";

	}



</script>

</head>

<style type="text/css"> 



TD.clsTab {

	background-color: purple;

	color : #FFFFFF;

	Font-Size : 12;

	border-left: 1px solid ;

	border-right: 1px solid;

	border-top: 2px solid;

	border-bottom: 2px inset;

	font-weight: bold;

}



TD.clsTabSelected

	{

	color : #000000;

	Font-Family : Arial, Helvetica, Sans-Serif;

	Font-Size : 12;

	Text-Decoration : none;

	border-top: 2px outset ;

	border-left: 2px outset ;

	border-right: 2px outset ;

	background-color: #eeeeee;

	font-weight: bold;

	}

</style>



	<table bgColor="#eeeeee">

	<tr>

		<td id="tabs" class="clsTabSelected" onClick="TabClick(0);">

			Table 1

		</td>

		<td id="tabs" class="clsTab" onClick="TabClick(1);">

			Table 2

		</td>

	</tr>

	<tr>

		<td colspan="6" bgcolor="#eeeeee" height="16"></td>

	</tr>

	</table>



	<table id="dataContent"  style="display = 'block'">

	<tr>

	<td> table 1</td>

        </tr>

        </table>



	<table id="dataContent"  style="display = 'none'">

	<tr>

	<td> table 2</td>

        </tr>

        </table>