Tabs using javascript

Here is an example to how to create a tab control in html using the div tag and the javascript



<script type="text/javascript" language="JavaScript"><!--
function ManageTabPanelDisplay() {
//
// Between the parenthesis, list the id's of the div's that
// will be affected when tabs are clicked. List in any
// order. Put the id's in single quotes (apostrophes)
// and separate them with a comma -- all one line.
//
var idlist = new Array('tab1focus','tab2focus','tab3focus','tab1ready','tab2ready','tab3ready','content1','content2','content3');

// No other customizations are necessary.
if(arguments.length < 1) { return; }
for(var i = 0; i < idlist.length; i++) {
var block = false;
for(var ii = 0; ii < arguments.length; ii++) {
if(idlist[i] == arguments[ii]) {
block = true;
break;
}
}
if(block) { document.getElementById(idlist[i]).style.display = "block"; }
else { document.getElementById(idlist[i]).style.display = "none"; }
}
}
//--></script>



<!-- Below is the CSS for the example tab panel div tags.
You may, of course, change these according to your
design requirements.

Refer to the Creating a Tab Panel article for notes
about this CSS. -->

<style type="text/css">
.tab {
font-family: verdana,sans-serif;
font-size: 14px;
width: 100px;
white-space: nowrap;
text-align: center;
border-style: solid;
border-color: black;
border-left-width: 1px;
border-right-width: 1px;
border-top-width: 1px;
border-bottom-width: 0px;
padding-top: 5px;
padding-bottom: 5px;
cursor: pointer;
}
.tabhold {
background-color: white;
color: black;
}
.tabfocus {
background-color: black;
color: white;
}
.tabcontent {
font-family: sans-serif;
font-size: 14px;
width: 400px;
height: 275px;
border-style: solid;
border-color: black;
border-width: 1px;
padding-top: 15px;
padding-left: 10px;
padding-right: 10px;
}
</style>



<!-- Below is the example tab panel. Notes are embedded in
the HTML, and the Creating a Tab Panel article also
contains information. -->

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="tab1focus" class="tab tabfocus" style="display:block;">
Tab1
</div>
<div id="tab1ready" class="tab tabhold" style="display:none;">
<!-- Between the parenthesis, provide a list of ids that are to
be visible when this tab is clicked. The ids are between
single quotes (apostrophes) and separated with a comma. -->
<span onclick="ManageTabPanelDisplay('tab1focus','tab2ready','tab3ready','content1')">Tab1</span>
</div>
</td><td width="20"> </td><td>
<div id="tab2focus" class="tab tabfocus" style="display:none;">
Tab2
</div>
<div id="tab2ready" class="tab tabhold" style="display:block;">
<!-- Between the parenthesis, provide a list of ids that are to
be visible when this tab is clicked. The ids are between
single quotes (apostrophes) and separated with a comma. -->
<span onclick="ManageTabPanelDisplay('tab1ready','tab2focus','tab3ready','content2')">Tab2</span>
</div>
</td><td width="20"> </td><td>
<div id="tab3focus" class="tab tabfocus" style="display:none;">
Tab3
</div>
<div id="tab3ready" class="tab tabhold" style="display:block;">
<!-- Between the parenthesis, provide a list of ids that are to
be visible when this tab is clicked. The ids are between
single quotes (apostrophes) and separated with a comma. -->
<span onclick="ManageTabPanelDisplay('tab1ready','tab2ready','tab3focus','content3')">Tab3</span>
</div>
</td><td width="180"> </td><td>
</tr>
<tr>
<td colspan="6">
<div id="content1" class="tabcontent" style="display:block;">
<p style="margin-top:0px">
This is the first tab
</p>
<p>
This tab is generated for the first tab data. Here you can have any data related to the first tab
</p>
<p>
WE can also have a paragraph of data, if we want to it to be
dynamically we need to concentrate more on this
</p>
<p>
blah................
</p>
<p style="margin-bottom:0px">
Tab1 sucessfully done
</p>
</div>
<div id="content2" class="tabcontent" style="display:none;">
<p style="margin-top:0px">
Hello everyone Now testing the contect2
</p>
<p>
This software is one of the most sophisticated form handlers available
on the Internet. Yet, it is easy to implement.
</p>
<p>
And it has anti-hijacking code built right in.
</p>
<p>
The software also helps spam-proof your web site so email
harvesting robots find nothing when they crawl your site.
</p>
<p style="margin-bottom:0px">
This is the sampel test program use this for the further resiults
</p>
</div>
<div id="content3" class="tabcontent" style="display:none;">
<div style="margin: 0px 20px 10px 0px; width: 80px; height: 105px; float: left;">Third tab test data</div>
<p style="margin-top:0px">
test data you can write anything here.
test datatest datatest datatest datatest data....... THis is the third tab
<p>
I noticed unusual activity on the server and determined a script
was being used to send spam. Quickly, I replaced that script with one that would
record everything sent to it but would not send email.
</p>
<p>
During the hijacking, which continued for hours, I developed and tweaked code to
block that very thing.<!-- The code was developed and tested and tweaked and tested
again, using the live hijacking to measure effectiveness.-->
</p>
<p>
Get some peace of mind. Get this
</p>

</div>

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