首页 > 网络编程 > JavaScript > 基础知识 > div css js切换

js切换div css注意的细节

2012-12-10 09:10:26 作者：

有些朋友在做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 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> 

js切换div css注意的细节

您可能感兴趣的文章: