Creating Javascript Tab Control.

This article will tell you how to create a javascript tab in your webpage.

Steps-

1) Create a Table in which the first row will contain the buttons used as Tab on different cell.
and there id should be relvent to the tab content for example.

<input id="btnGrid" type="button">


2) The below rows contain the div tags used as container for tab. There should be equal no of div tags to that of button and their id should relevent to the content and must be

such that removing the prefix of the corresponding button prefix it should be same. for example
Our button has id=btnGrid here btn is button prefix. Now you div should have id=Grid that means removing btn prefix.

set style="display:none; for each div tag except first one which should shown by default

3) Now make a javascript function lets call ShowHide()

<script type="text/javascript" language="javascript">

function Showhide(el)
{
// first hide all the div tags by setting style="display:none" and also set the button style to inactive on by just setting its css clss to inactive class if you have

the knowledge of css otherwis use

document.getElementById("btnGrid").style.backgroundColor="##EEEEEE"; // button
document.getElementById("Grid") = 'none'; // div

document.getElementById("btnGraph").style.backgroundColor="##EEEEEE"; // button
document.getElementById("Graph") = 'none'; // div
// and so on
// Now set display:block for the element that called the function and button to active color

document.getElementById('btn'+el).style.backgroundColor="##cccccc"; //for button
var e = document.getElementById(el); // for div
var st=e.style.display;

if(st == 'none')
e.style.display = 'block';
else
e.style.display = 'none';

}
lt;script>

4) Now call the function from each button like on its click event. for eg.

<input id="cmdGrid" type="button" value="Grid" onclick="showhideBenifits('Grid');" style="backgroundColor="##EEEEEE""/>

Now you are done.

Note. Set the first (default display) div display:block and button to active color and rest to display:none and button to inactive color.

You can also customize your own setting through css if have the knowledge.

This Tab is implemented in Codegenerator tool on this site you can see this on codegenerator page and view its source code too.