利用JS做到隐藏div和显示div
2016-04-15 19:06
525 查看
利用JS做到隐藏div和显示div
博客分类: 一点一滴
javascript
div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白
Js代码
style="visibility: none;"
document.getElementById("typediv1").style.visibility="hidden";//隐藏
document.getElementById("typediv1").style.visibility="visible";//显示
通过设置display属性可以使div隐藏后释放占用的页面空间如下
Js代码
style="display: none;"
document.getElementById("typediv1").style.display="none";//隐藏
document.getElementById("typediv1").style.display="";//显示
此JS代码中,没有用try——Catch捕获错误,代码如下:
Js代码
<script language="javascript">
//创建一个showhidediv的方法,直接跟ID属性
function showhidediv(id){
var sbtitle=document.getElementById(id);
if(sbtitle){
if(sbtitle.style.display=='block'){
sbtitle.style.display='none';
}else{
sbtitle.style.display='block';
}
}
}
</script>
<div id="show" onMouseMove='showhidediv("msg")';>鼠标移动这里</div><!--这里是点击div,ID要下面的ID-->
<div id="msg" style="display:none;">出现显示的内容</div> <!--这里是MsgDiv-->
onMouseMove='showhidediv("msg")'; 这里是鼠标动作,可以替换成Click或其他!
做两个层之间的切换:
Js代码
<script language="javascript">
//创建一个showhidediv的方法,直接跟ID属性
function showhidediv(id){
var age=document.getElementById("msg_2");
var name=document.getElementById("msg_1");
if (id == 'name') {
if (name.style.display=='none') {
age.style.display='none';
name.style.display='block';
}
} else {
if (age.style.display=='none') {
name.style.display='none';
age.style.display='block';
}
}
}
</script>
<div id="show" style="float:left;" onMouseMove='showhidediv("name")';>Name:</div><div id="show" style="float:left;" onMouseMove='showhidediv("age")';>Age:</div>
<div id="msg_1" style="display:none;float:left;">林雨林</div>
<div id="msg_2" style="display:none;float:left;">18</div>
//示例二
显示一个层的同时隐藏另一个层
Html代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function showhidediv(id){
var age=document.getElementById("msg_2");
var name=document.getElementById("msg_1");
if (id == 'name') {
if (name.style.display=='none') {
age.style.display='none';
name.style.display='block';
}
} else {
if (age.style.display=='none') {
name.style.display='none';
age.style.display='block';
}
}
}
-->
</script>
</script>
</head>
<body>
<div id="msg_1" style="display:block;float:left;" onclick='showhidediv("age")';>
<p id="photoTitle" >单击此处添加描述</p></div>
<div id="msg_2" style="display:none;float:left;" >
<form id="">
<textarea class="textarea" id="" name=""></textarea>
<div class="">
<input type="button" value="保存" class="" id="">
<input type="button" value="取消" class="" id="" onclick='showhidediv("name")';>
</div>
<input type="hidden" name="" value=""></form>
</div>
</body>
</html>
博客分类: 一点一滴
javascript
div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白
Js代码
style="visibility: none;"
document.getElementById("typediv1").style.visibility="hidden";//隐藏
document.getElementById("typediv1").style.visibility="visible";//显示
通过设置display属性可以使div隐藏后释放占用的页面空间如下
Js代码
style="display: none;"
document.getElementById("typediv1").style.display="none";//隐藏
document.getElementById("typediv1").style.display="";//显示
此JS代码中,没有用try——Catch捕获错误,代码如下:
Js代码
<script language="javascript">
//创建一个showhidediv的方法,直接跟ID属性
function showhidediv(id){
var sbtitle=document.getElementById(id);
if(sbtitle){
if(sbtitle.style.display=='block'){
sbtitle.style.display='none';
}else{
sbtitle.style.display='block';
}
}
}
</script>
<div id="show" onMouseMove='showhidediv("msg")';>鼠标移动这里</div><!--这里是点击div,ID要下面的ID-->
<div id="msg" style="display:none;">出现显示的内容</div> <!--这里是MsgDiv-->
onMouseMove='showhidediv("msg")'; 这里是鼠标动作,可以替换成Click或其他!
做两个层之间的切换:
Js代码
<script language="javascript">
//创建一个showhidediv的方法,直接跟ID属性
function showhidediv(id){
var age=document.getElementById("msg_2");
var name=document.getElementById("msg_1");
if (id == 'name') {
if (name.style.display=='none') {
age.style.display='none';
name.style.display='block';
}
} else {
if (age.style.display=='none') {
name.style.display='none';
age.style.display='block';
}
}
}
</script>
<div id="show" style="float:left;" onMouseMove='showhidediv("name")';>Name:</div><div id="show" style="float:left;" onMouseMove='showhidediv("age")';>Age:</div>
<div id="msg_1" style="display:none;float:left;">林雨林</div>
<div id="msg_2" style="display:none;float:left;">18</div>
//示例二
显示一个层的同时隐藏另一个层
Html代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function showhidediv(id){
var age=document.getElementById("msg_2");
var name=document.getElementById("msg_1");
if (id == 'name') {
if (name.style.display=='none') {
age.style.display='none';
name.style.display='block';
}
} else {
if (age.style.display=='none') {
name.style.display='none';
age.style.display='block';
}
}
}
-->
</script>
</script>
</head>
<body>
<div id="msg_1" style="display:block;float:left;" onclick='showhidediv("age")';>
<p id="photoTitle" >单击此处添加描述</p></div>
<div id="msg_2" style="display:none;float:left;" >
<form id="">
<textarea class="textarea" id="" name=""></textarea>
<div class="">
<input type="button" value="保存" class="" id="">
<input type="button" value="取消" class="" id="" onclick='showhidediv("name")';>
</div>
<input type="hidden" name="" value=""></form>
</div>
</body>
</html>
相关文章推荐
- 关于移动div的具体实现(js)
- 【JS设计模式】温习简单工厂模式、工厂方法模式、抽象工厂模式概念
- JS 简单登录页面
- JS简单验证码
- js删除数组中的指定元素
- javascript基础一 (DOM基础一)
- 让你的javascript支持AMD,CMD和原生JS
- JavaScript 单例模式
- javascript 代码alert([] ==![]);为什么弹出结果为true?
- json使用
- js 获取地址栏最后一个文件名称
- JavaScript学习笔记
- JSP指令及九大内置对象
- js控制div缩放和移动
- 《ECMAScript 6入门》——JavaScript
- js中记录某个按钮的点击次数
- json字符串到js对象的转换
- xcode终端json中文乱码解决方案
- json的理解
- javascript 二分查找排序