div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白
style="visibility: none;"
document.getElementById("typediv1").style.visibility="hidden";//隐藏
document.getElementById("typediv1").style.visibility="visible";//显示
通过设置display属性可以使div隐藏后释放占用的页面空间如下
style="display: none;"
document.getElementById("typediv1").style.display="none";//隐藏
document.getElementById("typediv1").style.display="";//显示
此JS代码中,没有用try——Catch捕获错误,代码如下:
<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或其他!
做两个层之间的切换:
<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>
<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方法汇总 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>15种方法实现div显示和隐藏</title> [removed][removed] <...
使用JQUERY做的一个页面DIV动态隐藏 显示 点击+号图片后 DIV会自动隐藏 点击-号图片后 DIV会自动显示 隐藏的DIV区域内的控件值后台仍可以取得到,当页面刷新时,也不会改变隐藏区域的隐藏状态 使用JQUERY将页面状态...
本程序在网页中设计了Div层的显示和隐藏,代码简单、实用。
JS实现各种动态显示隐藏div效果,包括卷动显示隐藏效果,渐变显示隐藏效果,大小缩放显示隐藏效果
js实现多div的显示和隐藏,可实现选项卡效果。详细说明:http://www.our-code.com/news/201073/n616722.html 源码在文章中也全。
js实现定时隐藏div层,任你设置时间,时间一到立即隐藏
点击按钮(a标签)隐藏显示div内容,切换div内容
JS做的隐藏与显示DIV可拖动弹出层实例代码 学习参考
封装好的JS显示隐藏DIV(动画效果,递增显示,递减隐藏),很实用很炫的效果,已测试支持ie,firefox,safari,opera,谷歌浏览器.有bug和不足处欢迎指正,交流.
javascript DIV隐藏、显示 弹出式窗口样式
js点击文本输入框显示DIV,操作后点击其他地方将DIV框隐藏
纯js(兼容各浏览器),当鼠标停留在div上,动画递减隐藏DIV,鼠标离开时递增显示DIV,模拟出上线窗帘效果。
div实现iframe的框架左侧隐藏与显示实例;代码非常简单;分享给大家
ajax控制div窗口显示和隐藏
纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存
鼠标经过显示隐藏层js,隐藏层可加css样式,可随意控制大小,js有详细注释
div显示隐藏效果
js鼠标浮动显示div,在鼠标移动至input后可显示div层中的内容
使用js代码实现div层的显示与隐藏,主要是radio的属性。