欢迎来到代码驿站！

JavaScript代码

当前位置：首页 > 网页前端 > JavaScript代码

js切换div css注意的细节

时间：2021-08-04 08:32:30|栏目：JavaScript代码|点击： 次
附上代码：
复制代码 代码如下:

<!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>

上一篇：微信小程序实现登录注册功能

栏    目：JavaScript代码

下一篇：js与css的阻塞问题详析

本文标题：js切换div css注意的细节

本文地址：http://www.codeinn.net/misctech/163939.html

更多JavaScript代码

阅读排行

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。

如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。

联系QQ：914707363 | 邮箱：codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有