I have some javascript that will not work in IE, can anyone help?
It works fine in Mozilla and Chrome.
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css" media="screen">
.hide{
display:none;
}
</style>
</head>
<body>
<div id="tabs">
<div id="nav">
<p>Show Div 1:<input type="radio" name="tab" value="pkfrom" class="div1" /></p>
<p>Show Div 2:<input type="radio" name="tab" value="pkfrom" class="div2" /></p>
</div>
<div id="div1" class="tab">
<p>Enter<input type="text" name="input"></p>
</div>
<div id="div2" class="tab">
<p><input type="text" name="input"></p>
</div>
</div>
<script type="text/javascript" charset="utf-8">
(function(){
var tabs =document.getElementById('tabs');
var nav = tabs.getElementsByTagName('input');
/*
* Hide all tabs
*/
function hideTabs(){
var tab = tabs.getElementsByTagName('div');
for(var i=0;i<=nav.length;i++){
if(tab[i].className == 'tab'){
tab[i].className = tab[i].className + ' hide';
}
}
}
/*
* Show the clicked tab
*/
function showTab(tab){
document.getElementById(tab).className = 'tab'
}
hideTabs(); /* hide tabs on load */
/*
* Add click events
*/
for(var i=0;i<nav.length;i++){
nav[i].onclick = function(){
hideTabs();
showTab(this.className);
}
}
})();
</script>
</body>
</html>
