js切换div有关问题
日期：2014-05-16 浏览次数：20399 次
js切换div问题
<!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="wra
<!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="wra
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
