js切換div css注意的細節

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

附上代碼：複製代碼代碼如下:<!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 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 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 id="contentmenu3">
第三塊
</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 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 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 id="contentmenu3" class="ContentMenu">
第三塊
</div>

<div id="contentmenu4" class="ContentMenu">
第四塊
</div>
</div>
</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More