js切换div css注意的细节

附上代码：


代码如下:

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

赞 (0)

相关推荐

  • div+css+js模拟tab切换效果 事件绑定 IE,firefox兼容

    div+css+js模拟tab, 我这个版本,理论上可以添加无限个tab,而且,你只要管内容的添加行了,不需要改JS 当然,你得会DIV才行. div+css+js模拟tab 框1111 框2222 框3333 框4444 这里是内容撒．111．． 这里是内容撒．111．． 这里是内容撒．111．． 这里是内容撒222．． 这里是内容撒．222．． 这里是内容撒．222．． 这里是内容撒．333．． 这里是内容撒．333．． 这里是内容撒．333．． 这里是内容撒．444．． 这里是内容撒．44

  • 用html+css+js实现的一个简单的图片切换特效

    用html+css+js实现的一个简单的图片切换特效

    如图所示. 该图片切换特效实现很简单,而且兼容性很好. html页面如下 复制代码 代码如下: <div class="wrapper"> <div id="focus"> <ul> <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/01.jpg" a

  • css图片切换效果代码[不用js]

    css图片切换效果代码[不用js]

    纯css图切换 练习 教程来自snwebsite a{ display:block; border:1px solid #cccccc; width:20px; height:20px; margin:1px; } dl{ position:absolute; width:240px; height:170px; } dt{ position:absolute; right:1px; top:25px; } dd{ width:240px; height:170px; overflow:hidd

  • CSS+Js遮罩效果的TAB及焦点图片切换(推荐)

    CSS+Js遮罩效果的TAB及焦点图片切换(推荐)

    Js遮罩效果的TAB及图片切换 div, ul, ol, li, dl, dt, dd { margin:0; padding:0; } .imgFlash,.tab{margin:auto} /*------焦点图片的css-------*/ .imgFlash { height:230px;width:270px; position:relative; } .imgFlash dl { height:100%; overflow:hidden; position:absolute; widt

  • js+css实现tab菜单切换效果的方法

    本文实例讲述了js+css实现tab菜单切换效果的方法.分享给大家供大家参考.具体实现方法如下: index.css如下: 复制代码 代码如下: * {      margin: 0px;      padding: 0px;  }  body {      width: 600px;      margin: 0 auto;      background-color: silver;  }    #contanier {      background-color: yellow;     

  • js实现单一html页面两套css切换代码

    今天研究了一下JS的用setAttribute方法实现一个页面两份样式表的效果,具体方法如下: 第一步:在连接样式表的元素里定义一个id,例如 复制代码 代码如下: <link href="1.css" rel="stylesheet" type="text/css" id="css"> 我定义的id是css. 第二步:写一个js函数,代码如下: 复制代码 代码如下: <script type="t

  • 非常漂亮的JS+CSS图片幻灯切换特效

    非常漂亮的JS+CSS图片幻灯切换特效,用在你的首页比较不错,宽屏图片格式,每张图片平滑飞入切换,鼠标放上自动切换,和FLASH的平滑效果差不多,视觉冲击效果很爽,而且代码也不多,调试调用都方便,建议关注一下哦! 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

  • JS、CSS文字切换，定时交替，代码精简

    你可以把它看作像写一般的CSS列表一样,只用增加两三行代码就能完成切换效果. 文本定时变动代码 #newslist{ background:#f8f8f8;border:1px solid silver;padding:1px;height:20px;line-height:20px;width:288px; } #contain{ font-size:12px;overflow:hidden;list-style:none;width:288px;height:20px;margin:0px;

  • wap手机图片滑动切换特效无css3元素js脚本编写

    手机图片滑动切换,网上有很多这样的例子,但都借助于其他组件,让代码混乱的不行:还有就是用到css3里的 transform:translate(x,y);移动元素,不过发现在不支持css3的设备上马上完蛋了,所 有下定决心自己做一个,谁知出现了很多的问题,其中最重要的是给图片加链接,网页中的上下滚动条不能在拖动图片的时候滚动,并且不能兼容pc机器上的拖动:在这里就简单介绍一下遇到的问题和解决的方法: 问题一:给图片加上链接后,在拖动的时候总是跳到其他页面: 问题根源主要是不能判断是点击还是拖动,

  • js切换div css注意的细节

    附上代码: 复制代码 代码如下: <!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=&q

  • JS+DIV+CSS实现的经典标签切换效果代码

    JS+DIV+CSS实现的经典标签切换效果代码

    本文实例讲述了JS+DIV+CSS实现的经典标签切换效果代码.分享给大家供大家参考.具体如下: 这里演示JS+DIV+CSS实现的标签切换效果代码,通俗说就是滑动门的实现效果,很不错的实例,希望对你学习JS+CSS布局有帮助. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-css-bq-cha-tab-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

  • js+div+css下拉导航菜单完整代码分享

    js+div+css下拉导航菜单完整代码分享

    效果预览:http://keleyi.com/keleyi/phtml/menu/1.htm 下拉菜单 js+div+css下拉导航菜单完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w

  • JS轻松实现CSS设置,DIV+CSS常用CSS设置

    JS轻松实现CSS设置,DIV+CSS常用CSS设置

    早些时候见过一个鸟日本人写的DW中的样式设置http://www.99yp.com/uploads/200607/css/index.htm,写了一大堆的代码,靠,现在派不上用场,小鸽子写了一个更好的样式生成器,适合DIV+CSS架构的网页.(在网吧做网页的朋友,可以使用这个呀!)将常用的样式写了出来,做成DW的扩展插件多好,麻烦高手把他做成DW的扩展插件:小鸽子个人网:http://xbnz.126.com/[网址助记:新白娘子] ▒ 恋婷DIV+CSS编辑器 beta1.0 var sIni

  • JS+DIV+CSS实现仿表单下拉列表效果

    JS+DIV+CSS实现仿表单下拉列表效果

    本文实例讲述了JS+DIV+CSS实现仿表单下拉列表效果.分享给大家供大家参考.具体如下: JS+DIV+CSS实现仿表单下拉列表效果,是完全用CSS技术再配合JS实现的效果,用来代替传统的Select下拉框,虽然目前来说,此代码还有些粗糙,但对于美化列表的样式来说,可能以后会更方便,要比Select方便的多. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-css-fselect-codes/ 具体代码如下: <!DOCTYPE

  • DIV+CSS+JS不间断横向滚动实现代码

    DIV+CSS+JS实现不间断横向滚动代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>横向不间断滚动DIV CSS代码-DIVCSS5</title> </head> <body>

  • 效果直逼flash的Div+Css+Js菜单

    效果直逼flash的Div+Css+Js菜单 css菜单 body{ background-color:#B8B8A0; } #fbtn{ display:none; overflow:hidden; border-style:solid; border-width:1px; border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56; padding:1 1 1 1; width:115px; height:30px; } #fbtn_txt{ position:

  • JS+DIV+CSS排版布局实现美观的选项卡效果

    JS+DIV+CSS排版布局实现美观的选项卡效果

    本文实例讲述了JS+DIV+CSS排版布局实现美观的选项卡效果.分享给大家供大家参考.具体如下: 这是一个基于JavaScript的简单选项卡代码,陪新手练习一下Div+CSS排版的技巧,本选项卡可以继续美化修饰完善,选项卡在目前在众多网站上应用广泛,确实是一个很不错的网页布局方法. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-css-pbbj-nav-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

  • Div+CSS+JS树型菜单，可刷新

    搞了一个DIV+CSS菜单,兼容Firefox,分享给大家,大家一齐学习 Div+CSS+JS树型菜单,可刷新 #PARENT{ width:300px; padding-left:20px; } 我的网站 [url]www.netany.net[/url] [url]www.netany.net[/url] [url]www.netany.net[/url] 我的帐务 支付 网上支付 登记汇款 在线招领 历史帐务 网站管理 登录 管理 管理 管理 网站管理 登录 管理 管理 管理 工作需要搞了

随机推荐