首页
所有分类
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 相关文章推荐
Javascript实现简单的富文本编辑器附演示
Jun 16 Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 Javascript
引用jquery框架后出错的解决方法
Aug 09 Javascript
微信小程序 http请求的session管理
Jun 07 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
vue实现某元素吸顶或固定位置显示（监听滚动事件）
Dec 13 Javascript
原生js检测页面加载完毕的实例
Sep 11 Javascript
JS canvas绘制五子棋的棋盘
May 28 Javascript
mpvue将vue项目转换为小程序
Sep 30 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
使用vue for时为什么要key【推荐】
Jul 11 Javascript
vue npm install 安装某个指定的版本操作
Aug 11 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) BOSE(2) 77A(2) 收信机(3) 耳机(1) MOTOROLA(1) ICF-2010(1) 春雷3P7(1) 晶体管(2)
You might like
Paypal实现循环扣款（订阅）功能
2017/03/23 PHP
Jquery AJAX 用于计算点击率(统计)
2010/06/30 Javascript
js中将字符串转换成json的三种方式
2011/01/12 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
2013/10/15 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
javascript 中的console.log和弹出窗口alert
2016/08/30 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
Node.js学习之查询字符串解析querystring详解
2017/09/28 Javascript
除Console.log()外更多的Javascript调试命令
2018/01/24 Javascript
Vue.js 利用v-for中的index值实现隔行变色
2018/08/01 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
vue 实现小程序或商品秒杀倒计时
2019/04/14 Javascript
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
layui实现数据表格自定义数据项
2019/10/26 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
2020/06/12 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
nuxt.js添加环境变量,区分项目打包环境操作
2020/11/06 Javascript
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
Python调用服务接口的实例
2019/01/03 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
python 实现多线程下载视频的代码
2019/11/15 Python
python基于opencv检测程序运行效率
2019/12/28 Python
利于python脚本编写可视化nmap和masscan的方法
2020/12/29 Python
施工质量承诺书范文
2014/05/30 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
会议接待欢迎词范文
2015/01/26 职场文书
网络管理员岗位职责
2015/02/12 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
Python中Selenium对Cookie的操作方法
2021/07/09 Python
php实现自动生成验证码的实例讲解
2021/11/17 PHP