大家来帮忙看看哪错了 - JavaScript论坛

问题点数：0 回复次数：5

大家来帮忙看看哪错了

搜索更多相关主题的帖子: javascript　language　function　block　

第 2 楼

得分:0

for (var i = 1;i < 4;i++)
    {
        document.getElementById("List" + i).onmouseover = function()
        {
            document.getElementById("Layer" + i).style.display = 'none';
        }
        document.getElementById("List" + i).onmouseout = function()
        {
            document.getElementById("Layer" + i).style.display = 'block';
        }
    }

闭包的陷阱

个人ajax技术专题站： " target="_blank">http://www. 我不会闲你烦，只会闲你不够烦！

第 3 楼

得分:0

陷阱在哪里啊？我怎么感觉不到呢？拜托大姐说仔细点

第 4 楼

得分:0

哈哈，复制下来LZ这段代码运行的时候，也使我困惑了几分钟.
但是经过调试后发现原来是循环变量i的值在作怪。因为showContent()函数内部就只是一个循环，而又将showContent()放在<body>标记的onload事件中，所以当页面开始被打开的时候，就马上调用了showContent()函数，这时候就已经进行函数内部的for循环了.但是当你你尝试将鼠标移动到aaaaaaaaaaa或bbbbbbbbbbb或ccccccccccc的时候却发现没有你想要的结果，为什么呢？因为前面已经说了，当页面刚被装载的时候，showContent()函数的内部已经完成了3次循环了，所以循环变量i的值由0变成了4，而这时你用鼠标捕获到的是document.getElementById("List4")和document.getElementById("Layer4")对象，但是页面根本就不存在这两个对象，所以就出错了。哈哈。
  下面给LZ一段修改过的代码：
<script language="javascript">
function showContent()
{
    for (var i = 1;i < 4;i++)
    {
        document.getElementById("List" + i).onmouseover = function()
        {
             document.getElementById("Layer"+this.id.substr(4,1)).style.display="block";
        }
        document.getElementById("List" + i).onmouseout = function()
        {
           document.getElementById("Layer"+this.id.substr(4,1)).style.display="none";
        }
    }
}
</script>
<body onload="showContent();">
<div>
    <ul>
        <li><div id="List1">aaaaaaaaaaa</div></li>
        <li><div id="List2">bbbbbbbbbbb</div></li>
        <li><div id="List3">ccccccccccc</div></li>
    </ul>
    <div>
        <div id="Layer1">111111111111</div>
        <div id="Layer2">222222222222</div>
        <div id="Layer3">333333333333</div>
    </div>
</div>
</body>

怎么越学就觉得自己越笨

第 5 楼

得分:0

滑动门嘛，不是很简单嘛，看我写的

程序代码：

<script>
function $(id){return document.getElementById(id)}
onload=function(){
var li=$("List").getElementsByTagName("span");
for(var i=0;i<li.length;i++){li[i].onmouseover=Function("nTabs("+i+")");}
}
function nTabs(n){
var li1=$("List").getElementsByTagName("span");
var li2=$("Layer").getElementsByTagName("div");
for(var j=0;j<li1.length;j++){
if(n==j){li1[j].style.color="#ff0";li1[j].style.background="#3cf";}else{li1[j].style.color="#fff";li1[j].style.background="#29659A";}
}
for(var i=0;i<li2.length;i++){if(n==i){li2[i].style.display="block";}else{li2[i].style.display="none";}}
}
</script>
<style>
#List {width:314px;height:24px;border:1px solid #d6d6d6;}
#List span {float:left;margin:2px;width:100px;line-height:20px;font-size:9pt;color:#fff;background:#29659A;text-align:center;cursor:pointer;}

#Layer {width:314px;height:100px;border-left:1px solid #d6d6d6;border-bottom:1px solid #d6d6d6;border-right:1px solid #d6d6d6;}
#Layer div{width:auto;line-height:100px;display:none;text-align:center;}
</style>

<div id="List">
<span>111111111</span>
<span>222222222</span>
<span>333333333</span>
</div>

<div id="Layer">
<div>我是第一个</div>
<div>我是第二个</div>
<div>我是第三个</div>
</div>

[编程论坛] ASP超级群：49158383 敲门暗号：ASP编程
龍艺博客 http://www.

第 6 楼

得分:0

div+css不错，刚做网站的时候都要会

我不是一个随便的人，我随便起来不是人我哦。信不？