这个函数的写法整不明白！！

我这个写法为什么没有效果？<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test</title>
</head><body>
<script>
window.onload=about_nav;
function showsection(id){
var section=document.getElementsByTagName("section");
for(var i=0; i<section.length; i++){
if(section[i].id == id){
section[i].style.display="block";
}else{
section[i].style.display="none";
}
}
}
function about_nav(){
var about_nav=document.getElementById("about_nav");
var about_navA=about_nav.getElementsByTagName("a");
for(var i=0; i<about_navA.length; i++){
var about_nav_href=about_navA[i].getAttribute("href");
var id=about_nav_href.split("#")[1];
about_navA[i].onclick = function(){
showsection(id);
return false;
}
}}
</script>
<article>
  <h1>About</h1>
  <nav id="about_nav">
    <ul>
      <li><a href="#jay">Jay Skript</a></li>
      <li><a href="#domsters">Domsters</a></li>
    </ul>
  </nav>  <section id="jay">
    <h2>Jay Skript</h2>
    <p>description...about Jay Skript.</p>
  </section>
  <section id="domsters">
    <h2>Domsters</h2>
    <p>description...about Domsters.</p>
  </section>
</article>
</body>
</html>about_nav函数正确的写法是下面这样，看不明白，请求解释一下：function about_nav(){
var about_nav=document.getElementById("about_nav");
var about_navA=about_nav.getElementsByTagName("a");
for(var i=0; i<about_navA.length; i++){
var about_nav_href=about_navA[i].getAttribute("href");
var id=about_nav_href.split("#")[1];
about_navA[i].thislinkid=id;
about_navA[i].onclick = function(){
showsection(this.thislinkid);
return false;
}
}}

解决方案 »

  1.   

            about_navA[i].onclick = function(){alert(id)//增加这句你就明白了，输出的id都是domsters
                showsection(id);
                return false;
            }你这个设计到闭包问题，一下说不清楚。。function about_nav(){
        var about_nav=document.getElementById("about_nav");
        var about_navA=about_nav.getElementsByTagName("a");
        for(var i=0; i<about_navA.length; i++){
            var about_nav_href=about_navA[i].getAttribute("href");
            var id=about_nav_href.split("#")[1];
            about_navA[i].thislinkid=id;//给对象增加自定义属性thislinkid存储id
            about_navA[i].onclick = function(){
                showsection(this.thislinkid);//this对象为当前点击的连接，然后获取自定义属性
                return false;
            }
        }
     
    }
      

  2.   

    闭包+柯里化
    function about_nav(){
        var about_nav=document.getElementById("about_nav");
        var about_navA=about_nav.getElementsByTagName("a");
        for(var i=0; i<about_navA.length; i++){
            var about_nav_href=about_navA[i].getAttribute("href");
            var id=about_nav_href.split("#")[1];
            about_navA[i].onclick = (function(inputId){
    return function(){
    showsection(inputId);
    }
    })(id);
        }
    }
      

  3.   

    你的局部变量id永远取到的是最后一次给赋的值，肯定出错。循环遍历的时候将id记录在button上，单击的时候再取出来。var id = about_nav_href.split("#")[1];
                about_navA[i].show_id = id;
                about_navA[i].onclick = function () {
                    showsection(this.show_id);
                    return false;
                }
      

  4.   

    我的想法是about_navA[i]这个链接，点击的时候就调用showsection，showsection的参数就是这里的id。你说的给对象增加自定义属性thislinkid存储id，为什么呢？
      

  5.   

    纠结的问题啊
    http://www.hellbear.com/picturerecord/index.htmlhttp://www.hellbear.com/picturerecord/index.html
      

  6.   

    你的 about_nav 函数中 id 变量有问题。function about_nav() {
      // ... 省略
      for(var i=0; i<about_navA.length; i++){
        // ...  省略
        var id=about_nav_href.split("#")[1];
        about_navA[i].onclick = function(){
          showsection(id);
          return false;
        }
      }
    }// 注意：for {} 不是闭包。
    // 上面的定义，完全等同于
    function about_nav() {
      // ... 省略
      var id;
      for(var i=0; i<about_navA.length; i++){
        // ...  省略
        id=about_nav_href.split("#")[1];
        about_navA[i].onclick = function(){
          showsection(id);
          return false;
        }
      }
    }试着想想看 about_nav 运行结束后，id 的值是什么？
    所有的 onclick 都是在这以后运行，都要参照这个值。