js切换div css注意的细节

　　附上代码：

复制代码代码如下:

　　<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

　　<html>

　　<head>

　　/*具体模块放在这个大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>

　　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>

　　<li onclick="changeBody(1)">计划的执行</li>

　　</ul>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　第三块

　　</div>

　　第四块

　　</div>

　　</body>

　　</html>

　　问题：点击了<li onclick=”changeBody(2)”>战略资源 </li>

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

　　用jQuery可以直接解决这个问题，如下的代码：

　　HTML code:

复制代码代码如下:

　　<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

　　<html>

　　<head>

　　/*具体模块放在这个大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>

　　function changeBody(index) {

　　$(".ContentMenu").hide();

　　$("#contentmenu" + index).show(500);

　　}

　　</script>

　　</head>

　　<body>

　　<li onclick="changeBody(1)">计划的执行</li>

　　</ul>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　第三块

　　</div>

　　第四块

　　</div>

　　</body>

　　</html>

教程首页更多教程