Sinister Labs Freeware - JavaScript/CSS Tab Control

The purpose of this code is to simulate a tab control for a web page. A set of buttons are drawn on the page to simulate the tabs. Above or below the tabs, a set of tables are drawn, one for each tab button. Pressing a tab button changes the colors of the tab buttons and changes which table is displayed (the rest are hidden).

To use this program, copy the three sections of code below into your HTML page. Copy the first section into the <BODY> of your HTML, in the place where you want your tab control. Edit that code to make the correct number of tab buttons and to add content for each of the tables. Copy the second section into the <HEAD> of your HTML page. Copy the third section into a .css file. You may edit that code to change the color scheme of the tabs.

The following gives an example:

Now, this is a simple example of how a tab control maybe used. In this case, I've inserted a lone image into the table area for each selection. Much more sophisticated examples are possible. But, back to how to do this.

As I said above, you'll have three sets of code to copy and paste into your web page and a CSS page. In some cases, you then need to edit the guts of what you copy over.

Add the Body of the Tab Control to the Body of your HTML Page

The first segment of code belongs in the <BODY> part of your HTML page. Locate it at the position where you want the tab control.

<TABLE BORDER=0>
<TR>
	<TD ALIGN=center><INPUT TYPE=submit ClASS=picked ID="tab_1" onClick='select_tab(1, 3);' VALUE=" Topic 1 " /></TD>
	<TD ALIGN=center><input type=submit class=unpicked ID="tab_2" onClick='select_tab(2, 3);' VALUE=" Topic 2 " /></TD>
	<TD ALIGN=center><input type=submit class=unpicked ID="tab_3" onClick='select_tab(3, 3);' VALUE=" Topic 3 " /></TD>
</TR>
</TABLE>
<CENTER>


<TABLE ID=table_1 BORDER=1 WIDTH=98% BORDERCOLOR=red>
<TR>
<TD WIDTH=100% ALIGN=center>
	<TABLE ALIGN=center BORDER=0>
	<TR>
	<TD>
		
	</TD>
	</TR>
	</TABLE>
</TD>
</TR>
</TABLE>


<TABLE ID=table_2 BORDER=1 WIDTH=98% STYLE="display:none" BORDERCOLOR=red>
<TR>
<TD WIDTH=100% ALIGN=center>
	<TABLE WIDTH=100% BORDER=0>
	<TR>
	<TD>
		
	</TD>
	</TD>
	</TABLE>
</TD>
</TR>
</TABLE>


<TABLE ID=table_3 BORDER=1 WIDTH=98% STYLE="display:none" BORDERCOLOR=red>
<TR>
<TD WIDTH=100% ALIGN=center>
	<TABLE WIDTH=100% BORDER=0>
	<TR>
	<TD>
		
	</TD>
	</TD>
	</TABLE>
</TD>
</TR>
</TABLE>

You now need to edit that code to have:

the correct number of tab buttons,
the correct tab names in the correct order on the page,
the correct number of tables (each table is displayed at the push of one of the tab buttons), and finally
the correct content within each of the tables.

Let's look at these steps.

Edit the Tab Buttons

First off, make sure there is one of these lines

<TD ALIGN=center><INPUT TYPE=submit ClASS=picked ID="tab_1" onClick='select_tab(1, N);' VALUE=" Topic 1 " /></TD>

and the right number of these lines

<TD ALIGN=center><INPUT TYPE=submit ClASS=unpicked ID="tab_2" onClick='select_tab(2, N);' VALUE=" Topic 2 " /></TD>

for each of the tab buttons you want on top. The difference is that the first line has a CLASS=picked and the second line has a CLASS=unpicked. My example has four selections in total, so I used a line like the first one and three like the second.

Make sure you update each of the numbers in the strings tab_1 and select_tab(1, N), along with the N. Do not use leading zeros.

Next, make sure that you replace the string "Topic N" with your actual topic names. In my case, my topics were Black, Yellow, Chocolate and All and N=4.

Edit the Tables

Make sure that there is a table for each tab you created. (An interesting effect is to have more tab buttons than tables, set up so that multiple tab buttons point to a given table.)

`<TABLE ID=table_1 BORDER=1 WIDTH=98% BORDERCOLOR=red>`
`<TR>`
`<TD WIDTH=100% ALIGN=center>`
	`<TABLE ALIGN=center BORDER=0>`
	`<TR>`
	`<TD>`
		`...HTML for the content of this tab selection goes here...`
	`</TD>`
	`</TR>`
	`</TABLE>`
`</TD>`
`</TR>`
`</TABLE>`

Again, use a different number within ID=table_1 for each table. Do not use leading zeros. Then, replace the string ...HTML for the content of this tab selection goes here... with the content you want to see in that particular table.

Add the JavaScript and CSS "include" line into the <HEAD> of your HTML page

Copy this code anywhere into the <HEAD> of your HTML page.

<link rel="stylesheet" type="text/css" href="tabcontrol_styles.css" /> <script language="javascript">  </script>

The first line points to a CSS file you'll create in the next step.

Add the Button Style Definitions into a File Named tabcontrol_styles.css

Copy this code into a file called tabcontrol_styles.css. Only the picked and unpicked styles are used. The notes style just holds some other color definitions you may want to use.

.picked { height:100%; width:100%; border-color:#ff0000; /* Light Red */ background-color:#66CCFF; /* Light Blue */ color:#000000; /* Black */ } .unpicked { height:100%; width:100%; border-color:#000000; /* Black */ background-color:#1177BB; /* Dark Blue */ color:#ffffff; /* White */ } .notes { /* Pairs that work together */ background-color:#00FF00; /* Light Green */ background-color:#009900; /* Dark Green */ background-color:#66CCFF; /* Light Blue */ background-color:#1177BB; /* Dark Blue */ background-color:#FF0000; /* Light Red */ background-color:#CC0000; /* Dark Red */ color:#000000; /* Black */ color:#ffffff; /* White */ }

Install the HTML File and the CSS File in the Same Directory

You may choose to name the CSS file differently or place it in a different directory. If you do so, remember to update the href value on the link line in the header of your HTML page to point to the correct .css file.

You may shift the buttons around to any order you want. what's important is that the pointer from the tab to the table is correct.