<div id="comlist">
<span class="comfit" onmouseover="showContent('0')" id="nav0" style="cursor:hand"><a href="http://www.xx1.com/">菜单1</a></span>
<span class="comfit" onmouseover="showContent('1')" id="nav1" style="cursor:hand"><a href="http://www.xx2.com/">菜单2</a></span>
<span class="comfit" onmouseover="showContent('2')" id="nav2" style="cursor:hand"><a href="http://www.xx3.com/">菜单3</a></span>
</div>
<div id="content0" style="display:none;">
<div id="comr1">
</div>
</div>
<div id="content1" style="display:none;">
<div id="comr2">
</div>
</div><script language="JavaScript">
<!--
function showContent(id)
{
for (var i = 0;i < 2;i++)
{
var nav = document.getElementById("nav" + i);
var content = document.getElementById("content" + i);
if (i == id)
{
nav.className = 'selected';
content.style.display = "";
}
else
{
nav.className = 'comfit';
content.style.display = "none";
}
}
}
//-->
</script>原功能是 下拉菜单 TAB的切换功能 鼠标经过菜单1 显示comr1层的内容
鼠标经过菜单2 显示comr2层的内容
实际需要是,改成 当鼠标 离开comr1 层内容的时候 层内容消失,就是完全的下拉菜单效果!请高手帮忙改下
<span class="comfit" onmouseover="showContent('0')" id="nav0" style="cursor:hand"><a href="http://www.xx1.com/">菜单1</a></span>
<span class="comfit" onmouseover="showContent('1')" id="nav1" style="cursor:hand"><a href="http://www.xx2.com/">菜单2</a></span>
<span class="comfit" onmouseover="showContent('2')" id="nav2" style="cursor:hand"><a href="http://www.xx3.com/">菜单3</a></span>
</div>
<div id="content0" style="display:none;">
<div id="comr1">
</div>
</div>
<div id="content1" style="display:none;">
<div id="comr2">
</div>
</div><script language="JavaScript">
<!--
function showContent(id)
{
for (var i = 0;i < 2;i++)
{
var nav = document.getElementById("nav" + i);
var content = document.getElementById("content" + i);
if (i == id)
{
nav.className = 'selected';
content.style.display = "";
}
else
{
nav.className = 'comfit';
content.style.display = "none";
}
}
}
//-->
</script>原功能是 下拉菜单 TAB的切换功能 鼠标经过菜单1 显示comr1层的内容
鼠标经过菜单2 显示comr2层的内容
实际需要是,改成 当鼠标 离开comr1 层内容的时候 层内容消失,就是完全的下拉菜单效果!请高手帮忙改下
<span class="comfit" onmouseover="showContent('0')" id="nav0" style="cursor:hand;width:70px;" onmouseout="showContent(0)" onmouseover="showContent(0)"><a href="http://www.xx1.com/">菜单1</a></span>
<span class="comfit" onmouseover="showContent('1')" id="nav1" style="cursor:hand;width:70px;" onmouseout="showContent(1)" onmouseover="showContent(1)"><a href="http://www.xx2.com/">菜单2</a></span>
<span class="comfit" onmouseover="showContent('2')" id="nav2" style="cursor:hand;width:70px;" onmouseout="showContent(2)" onmouseover="showContent(2)"><a href="http://www.xx3.com/">菜单3</a></span>
</div><div id="content0" style="display:none;">
<div id="comr1">
11111
</div>
</div>
<div id="content1" style="display:none;margin-left:70px;">
<div id="comr2">
222222
</div>
</div>
<div id="content2" style="display:none;margin-left:140px;">
<div id="comr3">
33333
</div>
</div><script language="JavaScript">
<!--
function showContent(id)
{
for (var i = 0;i < 3;i++)
{
var nav = document.getElementById("nav" + i);
var content = document.getElementById("content" + i);
if (i == id)
{
nav.className = 'selected';
content.style.display = "";
}
else
{
nav.className = 'comfit';
content.style.display = "none";
}
}
}
//-->
</script>
楼上教育我的时候 我也改了增加个function hide Content(id)function hideContent(id){for (var i = 0;i < 5;i++){var nav = document.getElementById("nav" + i);var content = document.getElementById("content" + i);if (i == id){nav.className = 'selected';content.style.display = "none";}else{nav.className = 'comfit'; content.style.display = "none";}}}然后再每个层后面 加个
<div id="comr1"onmouseout ="hideContent('0')">