js切换div问题

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">/*具体模块放在这个大div里*/
#contentmenu1{
width:100%;
clear:both;
height:800px;
}/*具体模块div
  由上下两块div构成
  上面的div又左面  右边 三块拼成圆角图片
  下面div主要放置内容
*/
/*具体模块div*/
.content{
width:30%;
height:190px;
float:left;
margin-left:2%;
margin-top:10px;}
/*具体模块div上部分*/
.content-top{
width:100.5%;
height:24px;
float:left;
}
/*具体模块div上部分左*/
.content-top-left{
width:1%;
height:24px;
float:left;
background-image: url(images/module_head_bg_left.png);
background-position:left;
}/*具体模块div上部分右*/
.content-top-right{
width:99%;
height:24px;
background-image: url(images/module_head_bg_right.png);
float:left;
background-position:right;
}/*具体模块div下部分*/
.content-bottom{
width:100%;
height:150px;
float:left;
border:solid 1px #83ACCF;
}
/*第二块div*/
#contentmenu2{
width:100%;
border:solid 1px;
height:800px;
float:left;}/*第三块div*/
#contentmenu3{
width:100%;
border:solid 1px;
height:800px;
float:left;
display:none;
}/*第四块div*/
#contentmenu4{
width:100%;
border:solid 1px;
height:800px;
float:left;
display:none;
}
</style>
    <script type="text/javascript">
  function changeBody(index){
  switch(index){
    case 1:{
      document.getElementById('contentmenu1').style.display = "";
      document.getElementById('contentmenu2').style.display = "none";
      document.getElementById('contentmenu3').style.display = "none";
      document.getElementById('contentmenu4').style.display = "none";
      break;
    }
    case 2:{
     alert('aaaaaa');
      document.getElementById('contentmenu2').style.display = "block";
      document.getElementById('contentmenu1').style.display = "none";
      document.getElementById('contentmenu3').style.display = "none";
      document.getElementById('contentmenu4').style.display = "none";
      break;
    }
    case 3:{
     document.getElementById('contentmenu1').style.display = "none";
     document.getElementById('contentmenu2').style.display = "none";
     document.getElementById('contentmenu3').style.display = "";
     document.getElementById('contentmenu4').style.display = "none";
     break;
    }
    case 4:{
     document.getElementById('contentmenu1').style.display = "none";
     document.getElementById('contentmenu2').style.display = "none";
     document.getElementById('contentmenu3').style.display = "none";
     document.getElementById('contentmenu4').style.display = "";
     break;
    
    
    
    }
  }
} 
    
    
    
    
    
    
     </script>
</head><body>
    <div id="wrapper">
        
        <div id="header">
    
            
            <ul id="nav">
                <li onclick="changeBody(1)">计划的执行</li>
              <li onclick="changeBody(2)">战略资源 </li>
            <li onclick="changeBody(3)">项目地图 </li>
            <li onclick="changeBody(4)">项目分析 </li>
            </ul>
        </div>
        
        <!--第一块内容div-->
        <div id="contentmenu1">
           <div class="content">
         <div class="content-top">
         <div class="content-top-left"></div>
         <div class="content-top-right"></div>
           </div>
           <div class="content-bottom"></div>
           </div>
           
           
           
           
           <div class="content">
         <div class="content-top">
         <div class="content-top-left"></div>
         <div class="content-top-right"></div>
           </div>
           <div class="content-bottom"></div>
           </div>
           
           
           
           <div class="content">
         <div class="content-top">
         <div class="content-top-left"></div>
         <div class="content-top-right"></div>
           </div>
           <div class="content-bottom"></div>
           </div>
           
           <div class="content">
         <div class="content-top">
         <div class="content-top-left"></div>
         <div class="content-top-right"></div>
           </div>
           <div class="content-bottom"></div>
           </div>
           
           
           <div class="content">
         <div class="content-top">
         <div class="content-top-left"></div>
         <div class="content-top-right"></div>
           </div>
           <div class="content-bottom"></div>
           </div>
           
           
           <div class="content">
         <div class="content-top">
         <div class="content-top-left"></div>
         <div class="content-top-right"></div>
           </div>
           <div class="content-bottom"></div>
           </div>
           
           
           <div class="content">
         <div class="content-top">
         <div class="content-top-left"></div>
         <div class="content-top-right"></div>
           </div>
           <div class="content-bottom"></div>
           </div>
           
           
           <div class="content">
         <div class="content-top">
         <div class="content-top-left"></div>
         <div class="content-top-right"></div>
           </div>
           <div class="content-bottom"></div>
           </div>
           
           
           
           <div class="content">
         <div class="content-top">
         <div class="content-top-left"></div>
         <div class="content-top-right"></div>
           </div>
           <div class="content-bottom"></div>
           </div>
           
           
           <div class="content">
         <div class="content-top">
         <div class="content-top-left"></div>
         <div class="content-top-right"></div>
           </div>
           <div class="content-bottom"></div>
           </div>
           
           <div class="content">
         <div class="content-top">
         <div class="content-top-left"></div>
         <div class="content-top-right"></div>
           </div>
           <div class="content-bottom"></div>
           </div>
           
           <div class="content">
         <div class="content-top">
         <div class="content-top-left"></div>
         <div class="content-top-right"></div>
           </div>
           <div class="content-bottom"></div>
           </div>
           
           <!--第二块内容div-->
           <div id="contentmenu2">
           <div class="content">
         <div class="content-top">
         <div class="content-top-left"></div>
         <div class="content-top-right"></div>
           </div>
           <div class="content-bottom"></div>
           
           </div>
           
           
           
           
           <div class="content">
         <div class="content-top">
         <div class="content-top-left"></div>
         <div class="content-top-right"></div>
           </div>
           <div class="content-bottom"></div>
           </div>
           
           
           
           <div class="content">
         <div class="content-top">
         <div class="content-top-left"></div>
         <div class="content-top-right"></div>
           </div>
           <div class="content-bottom"></div>
           </div>
           
        
           
           
           
           
           
           
           
           
            </div>
            <!--第三块内容div-->
           <div id="contentmenu3">
            第三块
           
           
           
           
           
           
           
           
            </div>
            <!--第四块内容div-->
             <div id="contentmenu4">
             第四块
           
           
           
           
           
           
           
           
            </div>
           
           
           
           
           
           
      
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
         </div>
        
        
                
</body></html>点击了<li onclick="changeBody(2)">战略资源 </li>
 
这个的时候  'contentmenu2'这个div还是不显示出来？

解决方案 »

  1.   

    //如果不出来可能是你的div标签错误。<script type="text/javascript">
        function changeBody(index){
            for(var i=1;i<=4;i++){
                document.getElementById("contentmenu"+i).style.display = "none";
            }
            document.getElementById("contentmenu"+index).style.display = "block";
        }
    </script>
    <div id="header">
        <ul id="nav">
            <li onclick="changeBody(1)">计划的执行</li>
            <li onclick="changeBody(2)">战略资源 </li>
            <li onclick="changeBody(3)">项目地图 </li>
            <li onclick="changeBody(4)">项目分析 </li>
        </ul>
    </div><div id="contentmenu1">第一块</div>
    <div id="contentmenu2">第二块</div>
    <div id="contentmenu3">第三块</div>
    <div id="contentmenu4"> 第四块</div>
      

  2.   

    LZ你的代码是在记事本里面写的吗- -！,另外你的脚本看的蛋疼 你不介意用一下jQuery吧 。<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="../jquery/jquery-1.7b2.js" type="text/javascript"></script>
        <style type="text/css">
            /*具体模块放在这个大div里*/#contentmenu1 { width: 100%; clear: both; height: 800px; }
            /*具体模块div 由上下两块div构成 上面的div又左面 右边 三块拼成圆角图片 下面div主要放置内容 *//*具体模块div*/.content { width: 30%; height: 190px; float: left; margin-left: 2%; margin-top: 10px; }
            /*具体模块div上部分*/.content-top { width: 100.5%; height: 24px; float: left; }
            /*具体模块div上部分左*/.content-top-left { width: 1%; height: 24px; float: left; background-image: url(images/module_head_bg_left.png); background-position: left; }
            /*具体模块div上部分右*/.content-top-right { width: 99%; height: 24px; background-image: url(images/module_head_bg_right.png); float: left; background-position: right; }
            /*具体模块div下部分*/.content-bottom { width: 100%; height: 150px; float: left; border: solid 1px #83ACCF; }
            /*第二块div*/#contentmenu2 { width: 100%; border: solid 1px; height: 800px; float: left; display: none; }
            /*第三块div*/#contentmenu3 { width: 100%; border: solid 1px; height: 800px; float: left; display: none; }
            /*第四块div*/#contentmenu4 { width: 100%; border: solid 1px; height: 800px; float: left; display: none; }
        </style>
        <script type="text/javascript">
         
            function changeBody(index) {
                $(".ContentMenu").hide();
                $("#contentmenu" + index).show(500);
            }
        </script>
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <ul id="nav">
                    <li onclick="changeBody(1)">计划的执行</li>
                    <li onclick="changeBody(2)">战略资源 </li>
                    <li onclick="changeBody(3)">项目地图 </li>
                    <li onclick="changeBody(4)">项目分析 </li>
                </ul>
            </div>
            <!--第一块内容div-->
            <div id="contentmenu1" class="ContentMenu">
                <div class="content">
                    <div class="content-top">
                        <div class="content-top-left">
                        </div>
                        <div class="content-top-right">
                        </div>
                    </div>
                    <div class="content-bottom">
                    </div>
                </div>
                <div class="content">
                    <div class="content-top">
                        <div class="content-top-left">
                        </div>
                        <div class="content-top-right">
                        </div>
                    </div>
                    <div class="content-bottom">
                    </div>
                </div>
            </div>
            <!--第二块内容div-->
            <div id="contentmenu2" class="ContentMenu">
                <div class="content">
                    <div class="content-top">
                        <div class="content-top-left">
                        </div>
                        <div class="content-top-right">
                        </div>
                    </div>
                    <div class="content-bottom">
                    </div>
                </div>
                <div class="content">
                    <div class="content-top">
                        <div class="content-top-left">
                        </div>
                        <div class="content-top-right">
                        </div>
                    </div>
                    <div class="content-bottom">
                    </div>
                </div>
            </div>
            <!--第三块内容div-->
            <div id="contentmenu3" class="ContentMenu">
                第三块
            </div>
            <!--第四块内容div-->
            <div id="contentmenu4" class="ContentMenu">
                第四块
            </div>
        </div>
    </body>
    </html>
      

  3.   


    如果是LZ贴出来的这些一样的，那标签是肯定错了。俺看过了借用这位朋友的代码，简化一个小小的地方,把分给楼上这位朋友吧，没错的
    <script type="text/javascript">
    function changeBody(index){
        for(i=1;i<=4;i++)
        {
        document.getElementById('contentmenu'+i).style.display = i==index?"block":"none";
        }
    } 
    </script>