Try it this way:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="Keith Parker (diades)" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/*<![CDATA[*/
#tab_container{
}
#tab_content{
}
button{
border-bottom:none;
}
#tab_content div {
display : none;
}
/*]]>*/
</style>
</head>
<body>
<div id="tab_container">
<button id="tab_0">Tab 0</button>
<button id="tab_1">Tab 1</button>
<button id="tab_2">Tab 2</button>
<button id="tab_3">Tab 3</button>
<button id="tab_4">Tab 4</button>
</div>
<div id="tab_content">
<div id="tab_0_content" >Div 0 content</div>
<div id="tab_1_content" >Div 1 content</div>
<div id="tab_2_content" ><input type="text"></div>
<div id="tab_3_content" ><input type="text"></div>
<div id="tab_4_content" ><input type="text"></div>
</div>
<script type="text/javascript">
//<![CDATA[
(
function( )
{
var buttons = document.getElementById("tab_container").getElementsByTagName("button");
var tabs = document.getElementById("tab_content").getElementsByTagName("div");
for ( var b = 0; b < buttons.length; ++b )
{
buttons[b].type = "button"; // so they won't submit
buttons[b].onclick =
function( )
{
var find = this.id + "_content";
for ( t = 0; t < tabs.length; ++t )
{
tabs[t].style.display =
tabs[t].id == find ? "block" : "none";
}
}
}
tabs[0].style.display = "block";
}
)();
//]]>
</script>
</body>
</html>
Note: If any of your content div's need to contain <div>s themselves this code would need a couple of minor adjustments.