附上代碼：
復制代碼 代碼如下:
<!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還是不顯示出來？
用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>