Basic HTML tab, using javascript

by toy

This will show how to create tabs control in HTML.

CODE JAVASCRIPT
var ids = new Array(‘tab1′,’tab2′) // declare array of tabs

??

CODE JAVASCRIPT
function switchID(id) // function for switch between tabs
{
hideAllID(); // hide all the tabs
showDivID(id); // show the selected tab
}

??

CODE JAVASCRIPT
function hideAllID() // function for hide all tabs in the page
{
for(var i=0;i {
hideDivID(ids[i]);
}
}

??

CODE JAVASCRIPT
function hideDivID(id) // function for hiding the selected tab
{
if(document.getElementById)
{
document.getElementById(id).style.display = ‘none’;
}
}

??

CODE JAVASCRIPT
function showDivID(id) // function for showing the selected tab
{
if(document.getElementById)
{
document.getElementById(id).style.display = ‘block’;
}
}

This is how you are going to create in html files

CODE HTML
<a href=’javascript:switchID(‘tab1′);’>Something1</a>
<a href=’javascript:switchID(‘tab2′);’>Something2</a>

??

CODE HTML
<div id=’tab1′ style=’display:block;’>Content1</div>
<div id=’tab2′ style=’display:none;’> Content2</div>