有些朋友在做div css js切换时,会碰到很多的问题，于是搜集整理了一下，拿出来和大家分享，希望可以帮助你们
附上代码：
复制代码 代码如下:
<!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>
<div>
<ul>
<li>计划的执行</li>
<li>战略资源 </li>
<li>项目地图 </li>
<li>项目分析 </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>
<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></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>
</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>
<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:
复制代码 代码如下: