首页 技术 正文
技术 2022年11月15日
0 收藏 404 点赞 4,429 浏览 2377 个字

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” >出现显示的内容</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>
相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,489
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,904
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,737
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,490
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:8,128
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:5,291