I am trying to show/hide divs but I cannot get a 'home' div to display initially. I know the answer is simple but it plumb evades me.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
div.button {
cursorointer;
}
.mainglossary{
position:absolute;
top:215px;
left:225px;
margin:1px;
width:740px;
padding:5px;
background-color:#017343;/*#e9e1bc*/
/*border:solid 2px #000;*/
color:#eee;/*#fff*/
height:400px;
overflow:auto;
}
#navglossary{
position:absolute;
top:215px;
left:10px;
width:185px;
background-color:#017343;
color:#fff;
padding:4px;
overflow:auto;
/*border:#000000 thin solid;*/
}
</style>
<script type="text/javascript">
function swap(what)
{
var theDivs = document.getElementsByTagName('div');
for(var i = 0; i < theDivs.length; i++)
{
if(theDivs[i].id.search('swap') == 0)
{
theDivs[i].style.display = 'none';
}
}
document.getElementById('swap'+what).style.display = 'block';
}
window.onload = function()
{
var theDivs2 = document.getElementsByTagName('div');
for(var j = 0; j < theDivs2.length; j++)
{
if(theDivs2[j].id.search('swap') != -1)
{
theDivs2[j].style.display = 'none';
}
}
}
</script>
</head>
<body>
<div id="navglossary">
<div class="button" onClick="swap(1)">first</div>
<div class="button" onClick="swap(2)">second</div>
<div class="button" onClick="swap(3)">third</div>
<div class="button" onClick="swap(4)">fourth</div>
</div>
<div class="mainglossary">
<div id="swap0">home display</div>
<div id="swap1">first display</div>
<div id="swap2">second display</div>
<div id="swap3">third display</div>
<div id="swap4">fourth display</div>
</div>
</body>
</html>
Reply With Quote
Bookmarks