js切换div有关问题

2012-09-15

js切换div问题!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/h

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 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>

<div id="contentmenu3">
第三块

</div>

<div id="contentmenu4">
第四块

</div>

</div>

</body>

</html>

点击了<li onclick="changeBody(2)">战略资源 </li>

这个的时候 'contentmenu2'这个div还是不显示出来？

[解决办法]
LZ你的代码是在记事本里面写的吗- -！,另外你的脚本看的蛋疼你不介意用一下jQuery吧。

HTML code

<!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>

热点排行

JavaScript

js切换div有关问题