本文从学习角度出发,仅当做笔记。高手可以忽略本文。

借助div的display属性可以实现div的显示或隐藏,而且在隐藏后不占用原来显示的空间。

js控制显示和隐藏的代码:

 <script type="text/javascript">
function showDiv(obj){
document.getElementById(obj).style.display="";
//alert('已经显示');
}
function hideDiv(obj){
document.getElementById(obj).style.display="none";
//alert('已经隐藏');
}
</script>

HTML:

     <input name="btnShow" type="button" value="显示" onClick="showDiv('div1');">
<input name="btnHide" type="button" value="隐藏" onClick="hideDiv('div1');">
<div id="div1" style=" width:300px; height:200px; border:1px solid red;">
show it
</div>

这个有时候在界面的设计上会用得到。

div的显示和隐藏的更多相关文章

  1. jquery判断div是否显示或者隐藏

    jquery判断div是否显示或者隐藏 很多时候会要判断一个div是不是显示着,没显示要怎么处理,显示的如何处理: 方法很简单,选择到你要判断的div,再用is(':hidden')判断是否隐藏:或者 ...

  2. jquery实现点击控制div的显示和隐藏

    我们使用点击显示.点击隐藏的时候,一般有两种可选方案 .示例 html <div class="index"> <h1> 首页 </h1> &l ...

  3. jquery怎么实现点击一个按钮控制一个div的显示和隐藏

    示例html 1 2 <div class="abc" style="display:none"></div> <input ty ...

  4. 原生JS的移入溢出控制div的显示与隐藏

    原生JS的移入溢出控制div的显示与隐藏的写法 上面的写法火狐存在兼容性

  5. 简简单单,jquery中,使用checkbox控制div的显示与隐藏

    今天开发代码时,发现好久不用jquery就生疏了. 所以作这个记录, 使用checkbox控制div的显示与隐藏. 一,html代码处: <input type="checkbox&q ...

  6. javascript实现div的显示和隐藏

    http://www.cnblogs.com/oec2003/archive/2007/05/05/736492.html <html> <head> <meta htt ...

  7. js控制div样式显示与隐藏,JS通过点击超链接右边(指定位置)显示一个图标

    原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...

  8. js div的显示和隐藏

    <head>    <title></title>    <style type="text/css">        div    ...

  9. JS——取消事件冒泡,实现div的显示与隐藏 event.cancelBubble = true;

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. MFC编程入门之十一(对话框:模态对话框及其弹出过程)

    加法计算器对话框程序大家照着做一遍后,相信对基于对话框的程序有了些解了,有个好的开始对于以后的学习大有裨益.趁热打铁,这一节讲讲什么是对话框和非模态对话框,以及模态对话框怎样弹出. 一.模态对话框和非 ...

  2. PHP 小方法之 计算两个时间戳之间相差的日时分秒

    if(! function_exists ('timediff') ) { function timediff($begin_time,$end_time){ if($begin_time < ...

  3. MyBatis/Ibatis中#和$的区别

    1. #将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by #user_id#,如果传入的值是111,那么解析成sql时的值为order by "111&qu ...

  4. 计算机网络http,https,tcp,udp,get,post

    一.HTTP 超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息,HTTP协议以明文方式发送内容,不提供任何方式的数据加密,如果攻击者截取了Web浏览器和网站服务器之间的传输报文, ...

  5. Android doc打开太慢

    C:\Windows\System32\drivers\etc\HOSTS 127.0.0.1 fonts.googleapis.com 127.0.0.1 www.google.com 127.0. ...

  6. 简单研究Android View绘制一 测量过程

    2015-07-27 16:52:58 一.如何通过继承ViewGroup来实现自定义View?首先得搞清楚Android时如何绘制View的,参考Android官方文档:How Android Dr ...

  7. js获取页面宽度高度及屏幕分辨率

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

  8. 在可以调用OLE之前,必须将当前线程设置为单线程单元(STA)模式,请确保您的Main函数带有STAThreadAttribute

    导入导出功能,在调用ShowDialog时的错误,解决办法如下: WinForm窗体的入口点: /// <summary> /// 应用程序的主入口点. /// </summary& ...

  9. java 自带md5加密

    package test; import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; pub ...

  10. Android webservice的用法详细讲解

    Android webservice的用法详细讲解 看到有很多朋友对WebService还不是很了解,在此就详细的讲讲WebService,争取说得明白吧.此文章采用的项目是我毕业设计的webserv ...