为什么没有效果啊?帮忙分析下

我是想点击"首页"就展开"Home" 然后点击"联系"就隐藏"Home"显示 "contact"
但我写的脚本不知道哪里错了
<!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>
<script type="text/javascript">
function list(id){
var list = document.getElementById("list");
var item = list.getElementsByTagName("li");
for(var i=0; i<item.length; i++){
if(item[i].className.indexOf("section") == -1) continue;
if(item[i].getAttribute("id") != id){
item[i].style.display = "none";
}
else{
item[i].style.display = "block";
}
}
}
function shows(){
var list = document.getElementById("list");
var lists = list.getElementsByTagName("li");
for(var i=0; i<links.length; i++){
if(lists[i].className.indexOf("section") != -1){
var links = lists[i].getElementsByTagName("a");
for(var j=0; j<links.length; j++){
var sectionID = links[j].lastChind.nodeValue;
if(!document.getElementById(sectionID)) continue;
document.getElementById(sectionID).style.display = "none";
links[j].destination = sectionID;
links[j].onclick = function(){
list(this.destination);
return false;
}
}
}
}
}
window.onload = shows;
</script>
</head><body>
<ul id="list">
<li><a href="#home">首页</a></li>
<li class="section" id="home"><a href="">Home</a></li>
<li><a href="#contact">联系</a></li>
<li class="section" id="contact"><a href="">contact</a></li>
</ul>
</body>
</html>

解决方案 »

  1.   


    <head>
    <script src="jquery.js"></script>
    <script>
    $(function(){
    $("#id_home").click(function(){
    $("#home").show();
    $("#contact").hide();
    })
    $("#id_contact").click(function(){
    $("#home").hide();
    $("#contact").show();})})
    </script>
    </head>
    <body>
        <ul id="list">
            <li id="id_home">首页</li>
            <li class="section" id="home"><a href="">Home</a></li>
            <li id="id_contact">联系</li>
            <li class="section" id="contact"><a href="">contact</a></li>        
        </ul>
    </body>
      

  2.   

    window.onload=function(){
      var list = document.getElementById("list");
        lists = list.getElementsByTagName("li");    for(var i=0;i< lists.length-1;i+=2)
        {
             (function(i){
                lists[i].onclick = function()
                {   debugger;
                    for(var j=1;j< lists.length;j+=2){
                        if(i+1!=j){lists[j].style.display ="none";}else{lists[j].style.display ="block";}
                      }
                  };
            })(i);
        }
    }
     };})(i)
    }
    }
      

  3.   

        <ul id="list">
            <li><a href="#home">首页</a></li>
            <li class="section" id="home"><a href="">Home</a></li>
            <li><a href="#contact">联系</a></li>
            <li class="section" id="contact"><a href="">contact</a></li>     
            <li><a href="#home">首页1</a></li>
            <li class="section" id="Li1"><a href="">Home1</a></li>
            <li><a href="#contact">联系2</a></li>
            <li class="section" id="Li2"><a href="">contact2</a></li>        
        </ul>window.onload=function(){
      var list = document.getElementById("list");
        lists = list.getElementsByTagName("li");    for(var i=0;i< lists.length-1;i+=2)
        {
             (function(i){
                lists[i].onclick = function()
                {   debugger;
                    for(var j=1;j< lists.length;j+=2){
                        if(i+1!=j){lists[j].style.display ="none";}else{lists[j].style.display ="block";}
                      }
                  };
            })(i);
        }
    }
      

  4.   

    用jQuery不是很简单就实现了么~~
      

  5.   

    楼主，我时间不多，稍微看了下，给你指几个错误：
    1、show()方法里第一个for循环里的links应该是lists吧，下面的几个记得也改下
    2、第二个for循环里第一行lastChild你写错了每个人思路不一样，我也不说什么，仔细看看，想通了就快了