js 做的导航下拉菜单，鼠标事件失败
思路是，当鼠标移动到导航菜单的某个按钮时，通过鼠标事件调用js函数，将隐藏的层的display属性设置block使其显示出来，当鼠标离开按钮时再通过鼠标事件将隐藏层的di...
思路是，当鼠标移动到导航菜单的某个按钮时，通过鼠标事件调用js函数，将隐藏的层的display属性设置block使其显示出来，当鼠标离开按钮时再通过鼠标事件将隐藏层的display属性设置为none，当鼠标移动到隐藏曾时，隐藏层的display属性设置为block，当鼠标离开隐藏层时隐藏层的display属性设置为none，但是当隐藏层显示出来后鼠标离开按钮移动到隐藏层时，隐藏层就消失了，哪位大侠能给个解决办法，初学js，希望大侠能详细解答，如果是思路+代码+解释，再追加100分。
不是这样的呀，http://www.samsung.com，三星网站的导航效果那种。 展开
不是这样的呀，http://www.samsung.com，三星网站的导航效果那种。 展开
1个回答
展开全部
其实，这样的功能根本就用不着js代码，其实，用CSS就OK了！而且通用性好！
但如果你要的话，那写写给你也无妨！
以下代码：
js自动给菜单和内容的鼠标移动事件，
在HTML里没有鼠标移动的代码设置，所以，通用性好！
在菜单和内容里设置了相对应的顺序，就能直接支持！
你要改样式，只要改：#mNav .mover（移动事件）
和 #mNav .mout（离开后的样式）
<html>
<head>
<style>
#mNav {border:1px #afafff; display:block;width:600px;}
#mNav li{display:inline; cursor:hand;width:100px;text-align:center;color:ffffff;}
#mNav .mover{ background:#556ed8;border:#efefff 3px outset;}
#mNav .mout, #mNav li{ background:#335ea8;border:#efefff 3px inset;}
#mItems {border:1px #afafff; width:600px;height:500px;background:#e2efff;}
#mItems div{display:none;}
</style>
<script>
function initNavMenu()
{
var _mNav = document.getElementById("mNav");
for(var i=0 ; i <_mNav.childNodes.length ; i++ )
{
_mNav.childNodes[i].name=i;
_mNav.childNodes[i].onmouseover=function()
{
var index= parseInt( this.name );
var _mNavs = document.getElementById("mNav");
for(var j=0 ; j <_mNavs.childNodes.length ; j++ )
_mNavs.childNodes[j].className="mout";
this.className="mover";
var _mItems = document.getElementById("mItems").childNodes;
for( j=0; j< _mItems.length ; j++)
_mItems[j].style.display="none";
_mItems[ index ].style.display="block";
}
}
document.getElementById("mItems").childNodes[0].style.display="block";
document.getElementById("mNav").childNodes[0].className="mover";
}
window.onload = function()
{
initNavMenu();//初始化菜单导航函数
}
</script>
</head>
<!--------------body ------------->
<body>
<ul id=mNav>
<li>政治</li>
<li>娱乐</li>
<li>经济</li>
<li>文化</li>
</ul>
<div id=mItems >
<div>--政治--内容---</div>
<div>--娱乐--内容---</div>
<div>--经济--内容---</div>
<div>--文化--内容---</div>
</div>
</body>
</html>
但如果你要的话，那写写给你也无妨！
以下代码：
js自动给菜单和内容的鼠标移动事件，
在HTML里没有鼠标移动的代码设置，所以，通用性好！
在菜单和内容里设置了相对应的顺序，就能直接支持！
你要改样式，只要改：#mNav .mover（移动事件）
和 #mNav .mout（离开后的样式）
<html>
<head>
<style>
#mNav {border:1px #afafff; display:block;width:600px;}
#mNav li{display:inline; cursor:hand;width:100px;text-align:center;color:ffffff;}
#mNav .mover{ background:#556ed8;border:#efefff 3px outset;}
#mNav .mout, #mNav li{ background:#335ea8;border:#efefff 3px inset;}
#mItems {border:1px #afafff; width:600px;height:500px;background:#e2efff;}
#mItems div{display:none;}
</style>
<script>
function initNavMenu()
{
var _mNav = document.getElementById("mNav");
for(var i=0 ; i <_mNav.childNodes.length ; i++ )
{
_mNav.childNodes[i].name=i;
_mNav.childNodes[i].onmouseover=function()
{
var index= parseInt( this.name );
var _mNavs = document.getElementById("mNav");
for(var j=0 ; j <_mNavs.childNodes.length ; j++ )
_mNavs.childNodes[j].className="mout";
this.className="mover";
var _mItems = document.getElementById("mItems").childNodes;
for( j=0; j< _mItems.length ; j++)
_mItems[j].style.display="none";
_mItems[ index ].style.display="block";
}
}
document.getElementById("mItems").childNodes[0].style.display="block";
document.getElementById("mNav").childNodes[0].className="mover";
}
window.onload = function()
{
initNavMenu();//初始化菜单导航函数
}
</script>
</head>
<!--------------body ------------->
<body>
<ul id=mNav>
<li>政治</li>
<li>娱乐</li>
<li>经济</li>
<li>文化</li>
</ul>
<div id=mItems >
<div>--政治--内容---</div>
<div>--娱乐--内容---</div>
<div>--经济--内容---</div>
<div>--文化--内容---</div>
</div>
</body>
</html>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
