首页
所有分类
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 相关文章推荐
在标题栏显示新消息提示，很多公司项目中用到这个方法
Nov 04 Javascript
jquery做的一个简单的屏幕锁定提示框
Mar 26 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
May 07 Javascript
JavaScript中的pow()方法使用详解
Jun 15 Javascript
js实现简单的省市县三级联动效果实例
Feb 18 Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
Oct 05 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
Mar 02 Javascript
简述JS浏览器的三种弹窗
Jul 15 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
vux-scroller实现移动端上拉加载功能过程解析
Oct 08 Javascript
vue实现表格合并功能
Dec 01 Vue.js
不同的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
ESXI(1) Slave(1) 封装(1) Master(1) variables(1) 百度地图(1) 主从复制(1) caddy(1) 表约束(2) transaction(1)
You might like
PHP开启gzip页面压缩实例代码
2010/03/11 PHP
PHP常用技巧总结（附函数代码）
2012/02/04 PHP
解析php5配置使用pdo
2013/07/03 PHP
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
php中curl和file_get_content的区别
2014/05/10 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
用JavaScript脚本实现Web页面信息交互
2006/10/11 Javascript
用js 让图片在 div或dl里　居中，底部对齐
2008/01/21 Javascript
asp 取文本框名称代码
2008/12/02 Javascript
JQuery CSS样式控制 学习笔记
2009/07/23 Javascript
JavaScript的parseInt 取整使用
2011/05/09 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
2012/05/23 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
Move.js入门
2017/02/08 Javascript
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
2021/01/12 Vue.js
TensorFlow的权值更新方法
2018/06/14 Python
python中的二维列表实例详解
2018/06/19 Python
python实现数据分析与建模
2019/07/11 Python
解决pymysql cursor.fetchall() 获取不到数据的问题
2020/05/15 Python
台湾百利市购物中心：e-Payless
2017/08/16 全球购物
澳大利亚现代波西米亚风格女装网站：Bohemian Traders
2018/04/16 全球购物
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
巧克力蛋糕店创业计划书
2014/01/14 职场文书
先进集体事迹材料
2014/02/17 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
学术会议通知
2015/04/15 职场文书
幼儿园迎新生欢迎词
2015/09/30 职场文书
孩子满月酒答谢词
2015/09/30 职场文书
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL
nginx七层负载均衡配置详解
2022/07/15 Servers
Vue深入理解插槽slot的使用
2022/08/05 Vue.js