Problem in my Javascript code for Tab Panel- Help Please!
Hi Y'all...
I am hoping that someone can help me fix some pretty simple code.
I am building a web page that has tab panels that hide and show information depending on which one is selected. I am trying to make the tabs at the top of the page and go horizontal.
I have had some success, however I am having two problems. The first problem is that one of the tabs doesn't work. (specifically tab 4 "videos").
The other is that when you first start up the page, there are three tabs highlighted (1, 4 and 5), however there should only be 1 tab highlighted (tab1).
I have included my code below. can anyone tell me where my mistakes are?
Thank you!!!
<!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=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" language="JavaScript"><!--
function ManageTabPanelDisplay() {
var idlist = new Array('tab1focus','tab2focus','tab3focus','tab4focus', 'tab5focus','tab1ready','tab2ready','tab3ready','tab4ready', 'tab5ready','content1','content2','content3','content4','content5');
// 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>
Secondly, you are under the impression that browsers parse html sequentially. There are couple things I could think of that you could try.
1. Write a javscript function to initialize your tabs (probably the simplest).
2. Rather than have two <div tags for every item, just have one and switch the class name.
Bookmarks