首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js切换div css注意的细节

Posted in Javascript onDecember 10, 2012

附上代码： 

<!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注意的细节

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
用js遍历 table的脚本
Jul 23 Javascript
js option删除代码集合
Nov 12 Javascript
js/html光标定位的实现代码
Sep 23 Javascript
js完美的div拖拽实例代码
Jan 22 Javascript
我的Node.js学习之路（二）NPM模块管理
Jul 06 Javascript
基于Turn.js 实现翻书效果实例解析
Jun 20 Javascript
vue制作加载更多功能的正确打开方式
Oct 12 Javascript
div中文字内容溢出常见的解决方法
Mar 16 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
Aug 29 Javascript
vue-cli项目中使用Mockjs详解
May 14 Javascript
Puppet的一些技巧
Sep 17 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
Nov 01 Javascript
不同的jQuery API来处理不同的浏览器事件
Dec 09 #Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
Dec 09 #Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 #Javascript
定义JavaScript二维数组采用定义数组的数组来实现
Dec 09 #Javascript
javascript操作JSON的要领总结
Dec 09 #Javascript
js写一个弹出层并锁屏效果实现代码
Dec 07 #Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
Dec 07 #Javascript
蓝牙耳机(1) 蓝牙(1) 华为(1) 声卡驱动(1) RustDesk(1) 虚拟键盘(1) 鸿蒙3.0(1) win7(2) Debian(1) 鸿蒙(2)
You might like
使用无限生命期Session的方法
2006/10/09 PHP
php遍历文件夹和文件列表示例分享
2014/03/11 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
php简单创建zip压缩文件的方法
2016/04/30 PHP
PHP实现给定一列字符，生成指定长度的所有可能组合示例
2019/06/22 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
取得传值的函数
2006/10/27 Javascript
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
js setTimeout opener的用法示例详解
2013/10/23 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
对称加密与非对称加密优缺点详解
2017/02/06 Javascript
深入理解ES6中let和闭包
2018/02/22 Javascript
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
零基础之Node.js搭建API服务器的详解
2019/03/08 Javascript
深入浅析vue中cross-env的使用
2019/09/12 Javascript
小程序接口的promise化的实现方法
2019/12/11 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
Python的Flask框架中@app.route的用法教程
2015/03/31 Python
python如何读写json数据
2018/03/21 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
对python csv模块配置分隔符和引用符详解
2018/12/12 Python
详解Python用户登录接口的方法
2019/04/17 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
python selenium爬取斗鱼所有直播房间信息过程详解
2019/08/09 Python
python中Lambda表达式详解
2019/11/20 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
django迁移文件migrations的实现
2020/03/31 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
大学生职业生涯规划书模板
2014/01/03 职场文书
群众路线教育实践活动自我剖析思想汇报
2014/10/04 职场文书
感恩教育观后感
2015/06/17 职场文书
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript