js切换divcss注意的细节
JS 切换 注意 细节
2023-06-13 09:14:42 时间
附上代码：
复制代码代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<metahttp-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:solid1px#83ACCF;
}
/*第二块div*/
#contentmenu2{
width:100%;
border:solid1px;
height:800px;
float:left;
}
/*第三块div*/
#contentmenu3{
width:100%;
border:solid1px;
height:800px;
float:left;
display:none;
}
/*第四块div*/
#contentmenu4{
width:100%;
border:solid1px;
height:800px;
float:left;
display:none;
}
</style>
<scripttype="text/javascript">
functionchangeBody(index){
switch(index){
case1:{
document.getElementById("contentmenu1").style.display="";
document.getElementById("contentmenu2").style.display="none";
document.getElementById("contentmenu3").style.display="none";
document.getElementById("contentmenu4").style.display="none";
break;
}
case2:{
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;
}
case3:{
document.getElementById("contentmenu1").style.display="none";
document.getElementById("contentmenu2").style.display="none";
document.getElementById("contentmenu3").style.display="";
document.getElementById("contentmenu4").style.display="none";
break;
}
case4:{
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>
<divid="wrapper">
<divid="header">
<ulid="nav">
<lionclick="changeBody(1)">计划的执行</li>
<lionclick="changeBody(2)">战略资源</li>
<lionclick="changeBody(3)">项目地图</li>
<lionclick="changeBody(4)">项目分析</li>
</ul>
</div>
<!--第一块内容div-->
<divid="contentmenu1">
<divclass="content">
<divclass="content-top">
<divclass="content-top-left"></div>
<divclass="content-top-right"></div>
</div>
<divclass="content-bottom"></div>
</div>
<divclass="content">
<divclass="content-top">
<divclass="content-top-left"></div>
<divclass="content-top-right"></div>
</div>
<divclass="content-bottom"></div>
</div>
<divclass="content">
<divclass="content-top">
<divclass="content-top-left"></div>
<divclass="content-top-right"></div>
</div>
<divclass="content-bottom"></div>
</div>
<divclass="content">
<divclass="content-top">
<divclass="content-top-left"></div>
<divclass="content-top-right"></div>
</div>
<divclass="content-bottom"></div>
</div>
<divclass="content">
<divclass="content-top">
<divclass="content-top-left"></div>
<divclass="content-top-right"></div>
</div>
<divclass="content-bottom"></div>
</div>
<divclass="content">
<divclass="content-top">
<divclass="content-top-left"></div>
<divclass="content-top-right"></div>
</div>
<divclass="content-bottom"></div>
</div>
<divclass="content">
<divclass="content-top">
<divclass="content-top-left"></div>
<divclass="content-top-right"></div>
</div>
<divclass="content-bottom"></div>
</div>
<divclass="content">
<divclass="content-top">
<divclass="content-top-left"></div>
<divclass="content-top-right"></div>
</div>
<divclass="content-bottom"></div>
</div>
<divclass="content">
<divclass="content-top">
<divclass="content-top-left"></div>
<divclass="content-top-right"></div>
</div>
<divclass="content-bottom"></div>
</div>
<divclass="content">
<divclass="content-top">
<divclass="content-top-left"></div>
<divclass="content-top-right"></div>
</div>
<divclass="content-bottom"></div>
</div>
<divclass="content">
<divclass="content-top">
<divclass="content-top-left"></div>
<divclass="content-top-right"></div>
</div>
<divclass="content-bottom"></div>
</div>
<divclass="content">
<divclass="content-top">
<divclass="content-top-left"></div>
<divclass="content-top-right"></div>
</div>
<divclass="content-bottom"></div>
</div>
<!--第二块内容div-->
<divid="contentmenu2">
<divclass="content">
<divclass="content-top">
<divclass="content-top-left"></div>
<divclass="content-top-right"></div>
</div>
<divclass="content-bottom"></div>
</div>
<divclass="content">
<divclass="content-top">
<divclass="content-top-left"></div>
<divclass="content-top-right"></div>
</div>
<divclass="content-bottom"></div>
</div>
<divclass="content">
<divclass="content-top">
<divclass="content-top-left"></div>
<divclass="content-top-right"></div>
</div>
<divclass="content-bottom"></div>
</div>
</div>
<!--第三块内容div-->
<divid="contentmenu3">
第三块
</div>
<!--第四块内容div-->
<divid="contentmenu4">
第四块
</div>
</div>
</body>
</html>
问题：点击了<lionclick=”changeBody(2)”>战略资源</li>
这个的时候‘contentmenu2′这个div还是不显示出来？
用jQuery可以直接解决这个问题，如下的代码：
HTMLcode:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<scriptsrc="../jquery/jquery-1.7b2.js"type="text/javascript"></script>
<styletype="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:solid1px#83ACCF;}
/*第二块div*/#contentmenu2{width:100%;border:solid1px;height:800px;float:left;display:none;}
/*第三块div*/#contentmenu3{width:100%;border:solid1px;height:800px;float:left;display:none;}
/*第四块div*/#contentmenu4{width:100%;border:solid1px;height:800px;float:left;display:none;}
</style>
<scripttype="text/javascript">
functionchangeBody(index){
$(".ContentMenu").hide();
$("#contentmenu"+index).show(500);
}
</script>
</head>
<body>
<divid="wrapper">
<divid="header">
<ulid="nav">
<lionclick="changeBody(1)">计划的执行</li>
<lionclick="changeBody(2)">战略资源</li>
<lionclick="changeBody(3)">项目地图</li>
<lionclick="changeBody(4)">项目分析</li>
</ul>
</div>
<!--第一块内容div-->
<divid="contentmenu1"class="ContentMenu">
<divclass="content">
<divclass="content-top">
<divclass="content-top-left">
</div>
<divclass="content-top-right">
</div>
</div>
<divclass="content-bottom">
</div>
</div>
<divclass="content">
<divclass="content-top">
<divclass="content-top-left">
</div>
<divclass="content-top-right">
</div>
</div>
<divclass="content-bottom">
</div>
</div>
</div>
<!--第二块内容div-->
<divid="contentmenu2"class="ContentMenu">
<divclass="content">
<divclass="content-top">
<divclass="content-top-left">
</div>
<divclass="content-top-right">
</div>
</div>
<divclass="content-bottom">
</div>
</div>
<divclass="content">
<divclass="content-top">
<divclass="content-top-left">
</div>
<divclass="content-top-right">
</div>
</div>
<divclass="content-bottom">
</div>
</div>
</div>
<!--第三块内容div-->
<divid="contentmenu3"class="ContentMenu">
第三块
</div>
<!--第四块内容div-->
<divid="contentmenu4"class="ContentMenu">
第四块
</div>
</div>
</body>
</html>
相关文章
- 点击导航栏，切换div内容（js+css+html）[通俗易懂]
- 不用React Vue，只用原生JS，如何开发单页面应用？
- JS跳转代码_js中跳转页面路径
- 【说站】js小数转为整数的函数
- js根据起始日期加间隔天数计算出结束日期
- clipboard.js：最轻便的复制页面内容到剪切板的JS
- JS数组实现图片切换
- 妙用JS获取Oracle信息的快速方法（js获取Oracle）
- 计算100000数组js脚本的执行时间
- 一些不错的js函数ajax
- Java/Js下使用正则表达式匹配嵌套Html标签
- Js+CSS实现的间断和不间断文本滚动代码
- Js切换功能的简单方法
- js编程笔记无名函数
- js字符串的各种格式的转换ToString，Format
- 远离JS灾难css灾难之js私有函数和css选择器作为容器
- JS控件的生命周期介绍
- js计算精度问题小结
- JS调用打印方法设置页眉页脚的实例
- js实现的切换面板实例代码
- phpci框架中加载css和js文件失败的解决方法
- 用html+css+js实现的一个简单的图片切换特效
- js+css实现tab菜单切换效果的方法