alert(arr[i-1])弹出undefined.这证明document.getElementById("pop"+arr[i-1])无效的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
function navs(){
var arr = [1,2,3];
var nav = $("nav").getElementsByTagName("li");
for(var i=0; i<nav.length; i++){
if(i == arr[i-1]){
nav[i].onmouseover = function(){
alert(arr[i-1])
document.getElementById("pop"+arr[i-1]).style.display="";
}
nav[i].onmouseout = function(){
document.getElementById("pop"+arr[i-1]).style.display="none";
}
}
}
}
window.onload = navs;
</script>
<style type="text/css">
*{margin:0;padding:0;}
.wrap{margin:55px auto;width:600px;}
a{text-decoration: none}
ul{list-style:none outside none}
body{font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weight:bold}
.nav li{float: left;width:105px;height:25px;}
.nav li.cur{ background:url(images/m2-act.gif) no-repeat;}
.pop{clear: both;background:pink;height:30px;}
.pop li{float: left;width:100px;height:35px;line-height:35px;}
</style>
</head><body>
<div class="wrap">
<div class="nav" id="nav">
<ul>
<li><a href="">HOME</a></li>
<li><a href="">ABOUT US</a></li>
<li><a href="">SERVICES</a></li>
<li><a href="">SUPPORT</a></li>
<li><a href="">CONTACTS</a></li>
</ul>
</div>
<ul class="pop" id="pop1" style="display:none">
<li><a href="">公司概况</a>| </li>
<li><a href="">资质荣誉</a>|</li>
<li><a href="">媒体报道</a></li>
</ul>
<ul class="pop" id="pop2" style="display:none">
<li><a href="">公司概况</a>| </li>
<li><a href="">资质荣誉</a>|</li>
<li><a href="">媒体报道</a></li>
</ul>
<ul class="pop" id="pop3" style="display:none">
<li><a href="">公司概况</a>| </li>
<li><a href="">资质荣誉</a>|</li>
<li><a href="">媒体报道</a></li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
function navs(){
var arr = [1,2,3];
var nav = $("nav").getElementsByTagName("li");
for(var i=0; i<nav.length; i++){
if(i == arr[i-1]){
nav[i].onmouseover = function(){
alert(arr[i-1])
document.getElementById("pop"+arr[i-1]).style.display="";
}
nav[i].onmouseout = function(){
document.getElementById("pop"+arr[i-1]).style.display="none";
}
}
}
}
window.onload = navs;
</script>
<style type="text/css">
*{margin:0;padding:0;}
.wrap{margin:55px auto;width:600px;}
a{text-decoration: none}
ul{list-style:none outside none}
body{font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weight:bold}
.nav li{float: left;width:105px;height:25px;}
.nav li.cur{ background:url(images/m2-act.gif) no-repeat;}
.pop{clear: both;background:pink;height:30px;}
.pop li{float: left;width:100px;height:35px;line-height:35px;}
</style>
</head><body>
<div class="wrap">
<div class="nav" id="nav">
<ul>
<li><a href="">HOME</a></li>
<li><a href="">ABOUT US</a></li>
<li><a href="">SERVICES</a></li>
<li><a href="">SUPPORT</a></li>
<li><a href="">CONTACTS</a></li>
</ul>
</div>
<ul class="pop" id="pop1" style="display:none">
<li><a href="">公司概况</a>| </li>
<li><a href="">资质荣誉</a>|</li>
<li><a href="">媒体报道</a></li>
</ul>
<ul class="pop" id="pop2" style="display:none">
<li><a href="">公司概况</a>| </li>
<li><a href="">资质荣誉</a>|</li>
<li><a href="">媒体报道</a></li>
</ul>
<ul class="pop" id="pop3" style="display:none">
<li><a href="">公司概况</a>| </li>
<li><a href="">资质荣誉</a>|</li>
<li><a href="">媒体报道</a></li>
</ul>
</div>
</body>
</html>
if(i == arr[i-1]){
nav[i].onmouseover = function(){
alert(arr[i-1])
i-1=-1???
i从0开始,0-1=-1,
数组下标不能为负
SERVICES
SUPPORT
我只想让这3个下拉菜单
<script type="text/javascript">
$(function(){
var t;
$("#nav ul li").each(function(index){
$(this).mouseover(function(){
$("#pop"+index).show()
}).mouseout(function(){
t = $("#pop"+index).hide()
})
})
})
</script>
延迟的机制就自己写一下吧。jq还是方便啊
你这样写每次都跳出 alert(arr[6-1])
应该是 1-3 而不是 1-5 ,所以5永远是未定义滴
if(i == arr[i-1]){
( function(i){
nav[i].onmouseover = function(){
alert(arr[i-1])
document.getElementById("pop"+arr[i-1]).style.display="";
}
nav[i].onmouseout = function(){
document.getElementById("pop"+arr[i-1]).style.display="none";
}
})(i);
}
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
function navs(){
var arr = [1,2,3];
var nav = $("nav").getElementsByTagName("li");
for(var i=0; i<nav.length; i++){
if(i == arr[i-1]){
nav[i].onmouseover = function(){
return function(){
alert(arr[i-1])
` ` document.getElementById("pop"+arr[i-1]).style.display="";
}
}(i);
nav[i].onmouseout = function(){
return function(){
document.getElementById("pop"+arr[i-1]).style.display="none"; }
}(i);
}
}
}
window.onload = navs;
</script>
<style type="text/css">
*{margin:0;padding:0;}
.wrap{margin:55px auto;width:600px;}
a{text-decoration: none}
ul{list-style:none outside none}
body{font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weight:bold}
.nav li{float: left;width:105px;height:25px;}
.nav li.cur{ background:url(images/m2-act.gif) no-repeat;}
.pop{clear: both;background:pink;height:30px;}
.pop li{float: left;width:100px;height:35px;line-height:35px;}
</style>
</head><body>
<div class="wrap">
<div class="nav" id="nav">
<ul>
<li><a href="">HOME</a></li>
<li><a href="">ABOUT US</a></li>
<li><a href="">SERVICES</a></li>
<li><a href="">SUPPORT</a></li>
<li><a href="">CONTACTS</a></li>
</ul>
</div>
<ul class="pop" id="pop1" style="display:none">
<li><a href="">公司概况</a>| </li>
<li><a href="">资质荣誉</a>|</li>
<li><a href="">媒体报道</a></li>
</ul>
<ul class="pop" id="pop2" style="display:none">
<li><a href="">公司概况</a>| </li>
<li><a href="">资质荣誉</a>|</li>
<li><a href="">媒体报道</a></li>
</ul>
<ul class="pop" id="pop3" style="display:none">
<li><a href="">公司概况</a>| </li>
<li><a href="">资质荣誉</a>|</li>
<li><a href="">媒体报道</a></li>
</ul>
</div>
</body>
</html>