求高手解答这个切换的原理!!!!!

为什么我无论点击标题1和标题2都显示"我在测试!2";
然后改成                         links[j].desc = setionId;
links[j].onclick = function(){
change(this.desc)
return false;
}
这样就正常了.谁讲解一下原因啊?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title> New Document </title>
  <style type="text/css">
    .wrap{width:120px;border:1px solid orange}
    *{padding:0;margin:0;}
    ul{list-style:none}
    ul ul{display:none}
    #list .pore{position:relative;}
    #list .pore ul{position:absolute;top:0;right:-122px;width:120px;border:1px solid green;overflow:hidden}
        #list .pore ul li a{display:block;height:20px}
  </style>
</head>
<body>
  
<ul id="list">
<li><a href="#one">标题1</a></li>
<li><a href="#two">标题2</a></li>
</ul> <div id="one">
<p>我在测试!1</p>
</div> <div id="two">
<p>我在测试!2</p>
</div>
    <script type="text/javascript"> function changeElem(){
var list = document.getElementById("list");
var links = list.getElementsByTagName("a");
for(var j=0; j<links.length; j++){
var setionId = links[j].getAttribute("href").split("#")[1];
document.getElementById(setionId).style.display = "none";
links[j].onclick = function(){
change(setionId)
return false;
}
}
}
changeElem();
function change(id){
//alert(id)
var divs =  document.getElementsByTagName("div");
for(var i=0; i<divs.length; i++){
if(divs[i].getAttribute("id") == id){
divs[i].style.display = "block";
}
else{
divs[i].style.display = "none";
}
}
}
    </script>
</body>
</html>

解决方案 »

  1.   

                function changeElem(){
                    var list = document.getElementById("list");
                    var links = list.getElementsByTagName("a");
                    for(var j=0; j<links.length; j++){
                        var setionId = links[j].getAttribute("href").split("#")[1];
                        document.getElementById(setionId).style.display = "none";
                        links[j].onclick = function(setionId){
                           return function()
                           {
                            change(setionId)
                            return false;
                           }
                        }(setionId)
                    }
                }
                changeElem();
                function change(id){
                //alert(id)
                    var divs =  document.getElementsByTagName("div");
                    for(var i=0; i<divs.length; i++){
                        if(divs[i].getAttribute("id") == id){
                            divs[i].style.display = "block";
                        }
                        else{
                            divs[i].style.display = "none";
                        }
                    }
                }为html元素绑定事件处理函数， 然而那个事件处理函数是有触发条件的时候才执行，就像单击按扭。
    也就是说你的函数执行的时候，那个循环早就结束，你那个setionid就是循环结束的时候的那值，所以自然就只有一种结果了
      

  2.   

    for循环内用var定义的变量的作用域是for之外，所以var a; for(..){a = 1;}和for(..){var a=1}.这2个a的作用域是一样的。这样在onclick这个闭包里，引用的是同一个a，自然结果一样。可以改成：
    links[j].onclick = (function(sid){
        return function(){
            change(sid);
            return false;
        };
    })(setionId);
      

  3.   

    恩 用闭包就可以了,代码稍微改下:
    for(var j=0; j<links.length; j++){
    (function(j){ // 用闭包把循环体内容包围起来即可
    var setionId = links[j].getAttribute("href").split("#")[1];
    document.getElementById(setionId).style.display = "none";
    links[j].onclick = function(){
    change(setionId)
    return false;
    }
    }(j)) // 闭包结束
    }
    看看这个吧
    for循环作用域问题