首页
所有分类
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仿百度有啊通栏展示效果实现代码
May 28 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 Javascript
js中直接声明一个对象的方法
Aug 10 Javascript
JS不能跨域借助jquery获取IP地址的方法
Aug 20 Javascript
jQuery中mouseover事件用法实例
Dec 26 Javascript
详解js图片轮播效果实现原理
Dec 17 Javascript
jQuery animate easing使用方法图文详解
Jun 17 Javascript
微信小程序实现倒计时补零功能
Jul 09 Javascript
Vue开发实现吸顶效果的示例代码
Aug 21 Javascript
Vue动态路由缓存不相互影响的解决办法
Feb 19 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 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
日本购物网站(72) 俄罗斯购物网站(137) 西班牙购物网站(115) 加拿大购物网站(185) 印度购物网站(45) 墨西哥购物网站(16) 瑞士购物网站(28) 韩国购物网站(27) 德国购物网站(227) 马来西亚购物网站(41)
You might like
关于PHP中的Class的几点个人看法
2006/10/09 PHP
透析PHP的配置文件php.ini
2006/10/09 PHP
php switch语句多个值匹配同一代码块的实现
2014/03/03 PHP
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
JavaScript闭包的简单应用
2017/09/01 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
JavaScript数组排序的六种常见算法总结
2020/08/18 Javascript
整理Python最基本的操作字典的方法
2015/04/24 Python
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
Django入门使用示例
2017/12/12 Python
django框架自定义用户表操作示例
2018/08/07 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
详解在Python中以绝对路径或者相对路径导入文件的方法
2019/08/30 Python
Python数据可视化：箱线图多种库画法
2019/11/06 Python
Pandas实现DataFrame按行求百分数(比例数)
2019/12/27 Python
Python文件操作基础流程解析
2020/03/19 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
Pycharm中安装wordcloud等库失败问题及终端通过pip安装的Python库如何添加到Pycharm解释器中(推荐)
2020/05/10 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
python程序如何进行保存
2020/07/03 Python
python MD5加密的示例
2020/10/19 Python
css3发光搜索表单分享
2014/04/11 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
如何定义一个可复用的服务
2014/09/30 面试题
模具设计与制造专业应届生求职信
2013/10/18 职场文书
消防安全责任书
2014/04/14 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书
单位接收证明格式
2015/06/18 职场文书
导游词之北京明十三陵
2019/10/28 职场文书
css3应用示例：新增的选择器
2022/03/16 HTML / CSS
Python绘制散乱的点构成的图的方法
2022/04/21 Python