两个层切换可以 但三个层就不能切换了 为什么？

两个层切换可以 但三个层就不能切换了 为什么？
代码是：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题文档</title>
<style type="text/css">
#big{width:250px; height:150px; border:1px solid #CCCCCC; background:#DDDDDD;}
#nav1,#nav2{width:80px; height:25px; background:#999999; line-height:25px; vertical-align:middle; font-size:12px; text-align:center; float:left; margin-left:2px;}#cont1,#cont2{clear:left;}
</style>
<script language="javascript" type="text/javascript">
function cont(v)
{
return document.getElementById("cont"+v);
}
function show(i)
{for(var j=1;j<=2;j++)
{cont(j).style.display = 'none';
}
cont(i).style.display = 'block';
}</script>
</head>
<body>
<div id="big">
<div id="nav1" onClick="show(1)">导航1</div>
<div id="nav2" onClick="show(2)">导航2</div>
<div id="nav2" onClick="show(3)">导航3</div>
<div id="cont1">内容1</div>
<div id="cont2" style="display:none;">内容2</div>
<div id="cont2" style="display:none;">内容3</div>
</div>
</body>
</html>

解决方案 »

  1.   

    发错了 
    是这样
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>无标题文档</title>
    <style type="text/css">
    #big{width:250px; height:150px; border:1px solid #CCCCCC; background:#DDDDDD;}
    #nav1,#nav2{width:80px; height:25px; background:#999999; line-height:25px; vertical-align:middle; font-size:12px; text-align:center; float:left; margin-left:2px;}#cont1,#cont2{clear:left;}
    </style>
    <script language="javascript" type="text/javascript">
    function cont(v)
    {
    return document.getElementById("cont"+v);
    }
    function show(i)
    {for(var j=1;j<=2;j++)
    {cont(j).style.display = 'none';
    }
    cont(i).style.display = 'block';
    }</script>
    </head>
    <body>
    <div id="big">
    <div id="nav1" onClick="show(1)">导航1</div>
    <div id="nav2" onClick="show(2)">导航2</div>
    <div id="nav3" onClick="show(3)">导航3</div>
    <div id="cont1">内容1</div>
    <div id="cont2" style="display:none;">内容2</div>
    <div id="cont3" style="display:none;">内容3</div>
    </div>
    </body>
    </html>
      

  2.   

    {for(var   j=1;j <=3;j++)  //这里换成3
      

  3.   

    <html   xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title> 无标题文档 </title>
    <style   type="text/css">
    #big{width:250px;   height:150px;   border:1px   solid   #CCCCCC;   background:#DDDDDD;}
    #nav1,#nav2,#nav3{width:80px;   height:25px;   background:#999999;   line-height:25px;   vertical-align:middle;   font-size:12px;   text-align:center;   float:left;   margin-left:2px;}#cont1,#cont2{clear:left;}
    </style>
    <script   language="javascript"   type="text/javascript">
    function   cont(v)
    {
    return   document.getElementById("cont"+v);
    }
    function   show(i)
    {for(var   j=1;j <=3;j++)
    {cont(j).style.display   =   'none';
    }
    cont(i).style.display   =   'block';
    } </script>
    </head>
    <body>
    <div   id="big">
    <div   id="nav1"   onClick="show(1)"> 导航1 </div>
    <div   id="nav2"   onClick="show(2)"> 导航2 </div>
    <div   id="nav3"   onClick="show(3)"> 导航3 </div>
    <div   id="cont1"> 内容1 </div>
    <div   id="cont2"   style="display:none;"> 内容2 </div>
    <div   id="cont3"   style="display:none;"> 内容3 </div>
    </div>
    </body>
    </html>
      

  4.   

    是啊,把J改成<=3就可以了
    改之前的代码只设置了1,2两个层,没取到3的值
      

  5.   

    楼主～～ 你自己写的“(var j=1; j<=2; j++)”，一共就j=1,j=2两种情况，j=3的时候不给你切换是很正常的嘛…… @_@
    下面是123都切换的了<html   xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title> 无标题文档 </title> 
    <style   type="text/css"> 
    #big{width:250px;   height:150px;   border:1px   solid   #CCCCCC;   background:#DDDDDD;} 
    #nav1,#nav2,#nav3{width:80px;   height:25px;   background:#999999;   line-height:25px;   vertical-align:middle;   font-size:12px;   text-align:center;   float:left;   margin-left:2px;}#cont1,#cont2{clear:left;} 
    </style> 
    <script   language="javascript"   type="text/javascript"> 
    function cont(v) 
    { 
    return document.getElementById("cont"+v); 
    } 
    function   show(i) {
    for(var j=1;j <=3;j++) {
    cont(j).style.display = 'none'; 
    } 
    cont(i).style.display = 'block'; 
    } 
    </script> 
    </head> 
    <body> 
    <div   id="big"> 
    <div   id="nav1"   onClick="show(1)"> 导航1 </div> 
    <div   id="nav2"   onClick="show(2)"> 导航2 </div> 
    <div   id="nav3"   onClick="show(3)"> 导航3 </div> 
    <div   id="cont1"> 内容1 </div> 
    <div   id="cont2"   style="display:none;"> 内容2 </div> 
    <div   id="cont3"   style="display:none;"> 内容3 </div> 
    </div> 
    </body> 
    </html> 
      

  6.   

    覺得這個答案應該最符合樓主的原意吧
    <!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>
        <title>未命名頁面</title>
        
        <style type="text/css">
        .title {width:250px; height:150px; border: 1px olid #CCCCCC; background-color: #eeeeee;}
        .navShow {width:80px; height:25px; background-color: #DDDDDD; text-align: center; vertical-align: middle; font-size: 15px; cursor: default; line-height: 25px;}
        .navHide {width:80px; height:25px; background-color: #999999; text-align: center; vertical-align: middle; font-size: 12px; cursor: hand; line-height: 25px;}
        .content {width:250px; height:125px; background-color:#DDDDDD; font-size:13px; clear:both;}
        </style>
        
        <script type="text/javascript">
        <!--
        
        function nav(v)
        {
            return document.getElementById('nav' + v);
        }
        
        function cont(v)
        {
            return document.getElementById('cont' + v);
        }
        
        function Show(v)
        {
            for (var i = 1; i < 4; i++)
            {
                if (i == v)
                {
                    nav(i).className = 'navShow';
                    cont(i).style.display = 'block';
                }
                else
                {
                    nav(i).className = 'navHide';
                    cont(i).style.display = 'none';
                }
            }
        }
        
        //-->
        </script>
        
    </head>
    <body>
        <form>
            <div class="title">
                <div id="nav1" class="navShow" style="float:left" onclick="Show(1)">導航1</div>
                <div id="nav2" class="navHide" style="float:left; margin-left:2px" onclick="Show(2)">導航2</div>
                <div id="nav3" class="navHide" style="margin-left:2px" onclick="Show(3)">導航3</div>
                <div id="cont1" class="content">內容1</div>
                <div id="cont2" class="content" style="display:none">內容2</div>
                <div id="cont3" class="content" style="display:none">內容3</div>
            </div>
        </form>
    </body>
    </html>