<!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=utf-8" />
<title>休闲网登陆页面</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
ul {
margin-left:580px;
}
li {
list-style-type:none;
float:left;
background:#090;
font-size:22px;
width:120px;
border:1px solid white;
}
p {
border:2px solid white;
}
</style>
<script>
function test(){
var lis=document.getElementsByTagName("li");
var mydiv=document.getElementsByTagName("div");
for(var i=0;i<lis.length;i++){
lis[i].onmouseover=function(){
//alert(i);当鼠标停在li上时显示的数字为3
//alert(mydiv[i]);当鼠标停在li上时显示为undefined
mydiv[i].style.display="block";
}
lis[i].onmouseout=function(){
mydiv[i].style.display="none";
}
}
}
window.onload=test;</script>
</head>
<body>
<ul>
<li>手机数码
<div style="display:none;">
<p>手机数码1</p>
<p>手机数码2</p>
<p>手机数码3</p>
</div>
</li>
<li>淘宝集市
<div style="display:none;">
<p>淘宝集市1</p>
<p>淘宝集市2</p>
<p>淘宝集市3</p>
</div>
</li>
<li>品牌商城
<div style="display:none;">
<p>品牌商城1</p>
<p>品牌商城2</p>
<p>品牌商城3</p>
</div>
</li>
</ul>
</body>
</html>我想当鼠标停在li上的时候,显示对应的二级菜单,但是,现在停上去没有反应,我试着调试了下,当我加上alert(i);当鼠标停在li上时显示的数字为3,alert(mydiv[i]);当鼠标停在li上时显示为undefined,就是说只要触发到onmouseover事件时 i的值就已经是3了,但是我的代码中i是跟外层循环一起变化的呀,这到底是怎么一回事?
解决方案 »
- 哪位仁兄知道怎么在浏览器(IE)中编辑word
- JavaScript 的replace正则问题 在线等
- 学过js再去学java容易学么
- 用户cookie丢失?
- ext高手帮我看个菜鸟问题啊!!谢谢了,在线等
- xmlhttp ff兼容问题..
- 求助:如何利用DOM删除一个结点的某个属性啊?在线等待
- 如何判断子页面的文本框是否存在?
- 这个servlet为什么有时会出现 Internal Server Error 的,明明只有两行代码,有时执行成功,有时执行会失败,不得其解???
- 关于字符处理的问题
- JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
- 请大侠们,推荐几本深入讲解js的经典书籍
当触发事件时取的 i 是最后的值<!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=utf-8" />
<title>休闲网登陆页面</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
ul {
margin-left:580px;
}
li {
list-style-type:none;
float:left;
background:#090;
font-size:22px;
width:120px;
border:1px solid white;
}
p {
border:2px solid white;
}
</style>
<script>
function test(){
var lis=document.getElementsByTagName("li");
var mydiv=document.getElementsByTagName("div");
for(var i=0;i<lis.length;i++){
lis[i].i=i;
lis[i].onmouseover=function(){
//alert(i);当鼠标停在li上时显示的数字为3
//alert(mydiv[i]);当鼠标停在li上时显示为undefined
mydiv[this.i].style.display="block";
}
lis[i].onmouseout=function(){
mydiv[this.i].style.display="none";
}
}
}
window.onload=test;</script>
</head>
<body>
<ul>
<li>手机数码
<div style="display:none;">
<p>手机数码1</p>
<p>手机数码2</p>
<p>手机数码3</p>
</div>
</li>
<li>淘宝集市
<div style="display:none;">
<p>淘宝集市1</p>
<p>淘宝集市2</p>
<p>淘宝集市3</p>
</div>
</li>
<li>品牌商城
<div style="display:none;">
<p>品牌商城1</p>
<p>品牌商城2</p>
<p>品牌商城3</p>
</div>
</li>
</ul>
</body>
</html>
只是一个赋值名句,你可以把 function(){} 看成是个 Function类型变量,只是赋值 没有执行