Menu
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 horizontal tabs at the top of the page.
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” “
<html xmlns=”
<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>
<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: 580px;
height: 275px;
border-style: solid;
border-color: black;
border-width: 1px;
padding-top: 15px;
padding-left: 10px;
padding-right: 10px;
}
</style>
</head>
<body>
<table border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td>
<div id=”tab1focus” class=”tab tabfocus” style=”display:block;”>Description</div>
<div id=”tab1ready” class=”tab tabhold” style=”display:none;”>
<span onclick=”ManageTabPanelDisplay(‘tab1focus’,’tab2ready’,’tab3ready’,’tab4ready’,’tab5ready’,’content1 ‘)”>Description</span>
</div>
</td><td width=”20″> </td>
<td>
<div id=”tab2focus” class=”tab tabfocus” style=”display:none;”>
Images
</div>
<div id=”tab2ready” class=”tab tabhold” style=”display:block;”>
<span onclick=”ManageTabPanelDisplay(‘tab1ready’,’tab2focus’,’tab3ready’,’content2′,’tab4ready’,’tab5ready ‘)”>Images</span>
</div>
</td><td width=”20″> </td>
<td>
<div id=”tab3focus” class=”tab tabfocus” style=”display:none;”>
Specifications
</div>
<div id=”tab3ready” class=”tab tabhold” style=”display:block;”>
<span onclick=”ManageTabPanelDisplay(‘tab1ready’,’tab2ready’,’tab3focus’,’content3′,’tab4ready’,’tab5ready ‘)”>Specifications</span>
</div>
</td><td width=”20″> </td>
<td>
<div id=”tab4focus” class=”tab tabfocus” style=”display:block;”>
Videos
</div>
<div id=”tab4ready” class=”tab tabhold” style=”display:none;”>
<span onclick=”ManageTabPanelDisplay(‘tab1ready’,’tab2ready’,’tab3ready’,’tab4focus’,’content4′,tab5ready’ )”>Videos</span>
</div>
</td><td width=”20″> </td>
<td>
<div id=”tab5focus” class=”tab tabfocus” style=”display:block;”>
Pricing
</div>
<div id=”tab5ready” class=”tab tabhold” style=”display:none;”>
<span onclick=”ManageTabPanelDisplay(‘tab1ready’,’tab2ready’,’tab3ready’,’tab4ready’,’content5′,’tab5focus ‘)”>Pricing</span>
</div>
</td>
</tr>
<tr>
<td colspan=”9″>
<div id=”content1″ class=”tabcontent” style=”display:block;”>
<p>
This is where descriptions go!
</p>
</div>
<div id=”content2″ class=”tabcontent” style=”display:none;”>
<p>
This is where images go.
</p>
</div>
<div id=”content3″ class=”tabcontent” style=”display:none;”>
<p>
This is where specs go!
</p>
</div>
<div id=”content4″ class=”tabcontent” style=”display:none;”>
<p>
This is where videos go!
</p>
</div>
<div id=”content5″ class=”tabcontent” style=”display:none;”>
<p>
This is where pricing goes.
</p>
</div>
</td></tr>
</table>
</body>
</html>