Hej bodyguard,
så kunne man f.eks. gøre sådan her:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd"><html xmlns="
http://schemas.microsoft.com/intellisense/html-401"> <head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
.menudiv1 { color: Red; }
.menudiv2{ color: Blue; }
</style>
<script type="text/JavaScript">
var divTemp = null;
var content = null;
function Click(divItem, strConId)
{
resetMenu();
divTemp = divItem;
divTemp.className = 'menudiv2';
content = document.getElementById(strConId);
content.style.display = "block";
}
function resetMenu()
{
if(divTemp == null)
return;
divTemp.className = 'menudiv1';
content.style.display = "none";
}
function Over(divItem)
{
divItem.className = 'menudiv2';
}
function Out(divItem)
{
if(divTemp != divItem)
divItem.className = 'menudiv1';
}
</script>
</head>
<body>
<table width="150px">
<tr>
<td align="center" style="border: solid 1px blue;">
<div class="menudiv1" onmouseover="Over(this);" onmouseout="Out(this);" onclick="Click(this, 'mnuContent1');">div hoved menu 1</div>
<div class="menudiv1" onmouseover="Over(this);" onmouseout="Out(this);" onclick="Click(this, 'mnuContent2');">div hoved menu 2</div>
<div class="menudiv1" onmouseover="Over(this);" onmouseout="Out(this);" onclick="Click(this, 'mnuContent3');">div hoved menu 3</div>
<div class="menudiv1" onmouseover="Over(this);" onmouseout="Out(this);" onclick="Click(this, 'mnuContent4');">div hoved menu 4</div>
<div class="menudiv1" onmouseover="Over(this);" onmouseout="Out(this);" onclick="Click(this, 'mnuContent5');">div hoved menu 5</div>
</td>
</tr>
<tr>
<td align="center" style="border: solid 1px gray;">
<div id="mnuContent1" style="display: none;">
Dette er content1
</div>
<div id="mnuContent2" style="display: none;">
<table>
<tr>
<td>
Dette er content 2
</td>
</tr>
<tr>
<td style="background-color: Gray; color: White;">
Lidt mere indhold
</td>
</tr>
</table>
</div>
<div id="mnuContent3" style="display: none;">
Dette er content 3
</div>
<div id="mnuContent4" style="display: none;">
Dette er content 4
</div>
<div id="mnuContent5" style="display: none;">
Dette er content 5
</div>
</td>
</tr>
</table>
</body>
</html>
Til forskel for det spørgsmål du refererede til cloner og append'er jeg ikke nogen nodes, jeg lader bare de divs som skal vises ved hvert menu punkt ligge der hvor de skal vises med display="none". Prøv eksemplet og se om det er det du leder efter, ellers må du jo lige uddybe lidt mere. :)
Mvh.
- Snap
