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

借助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. TestLink

    TestLink的主要功能包括: 测试需求管理 测试用例管理 测试用例对测试需求的覆盖管理 测试计划的制定 测试用例的执行 大量测试数据的度量和统计功能 TestLink的主要特色包括: 支持多产品或 ...

  2. Java过滤器,SpringMVC拦截器之间的一顺序点关系

    由于最近做的项目中有一部分是接口远程调用,用到了接入权限和业务权限的鉴定,需要采用SpringMVC的拦截器,以前用Struts2的时候用过拦截器,而SpringMVC的拦截器功能之前没研究过,所以这 ...

  3. LoarRunner11使用异常及解决方案

    1:使用VuGen录制后出现“由于另一个程序正在运行中,此操作无法完成.请选择切换到来激活正在运行中的程序,并更正问题”,点击“切换到”无效果. 解决:在“运行”中输入“msconfig”,选择“启用 ...

  4. 【原创】Mac os 10.10.3 安装xgboost

    大家用的比较多的是Linux和windows,基于Mac os的安装教程不多, 所以在安装的过程中遇到很多问题,经过较长时间的尝试,可以正常安装和使用, [说在前面]由于新版本的Os操作系统不支持op ...

  5. spring随手笔记2:初始化方法

    1.init-method="init" public class HelloWorldServiceImpl implements HelloWorldService { pri ...

  6. Cisco IOS IP Service Level Agreementv (IP SLA)

    Responder and Control Protocol 1.Responder内嵌在思科目标路由器中的一个组件,用来对IP SLA请求包做应答,通过对应达包添加时间戳属性,以提高测量计算的准确性 ...

  7. mac os 中类似于Linux的yum工具,或ubuntu的apt-get工具Homebrew

    Linux下的yum用着真省心! mac下的相类似的软件是Homebrew 使用前需要先安装它, ruby -e "$(curl -fsSL https://raw.githubuserco ...

  8. 无任何网络提供程序接受指定的网络路径(系统服务里没有workstation服务)

    今天同事访问公司服务器时,提示“无任何网络提供程序接受指定的网络路径”,网络ping正常,把防火墙关掉,再次尝试问题如故. 于是上网搜索: 1.服务停止:一般有workstation,server,c ...

  9. python基础教程-第二章-列表和元组

    本章将引入一个新的概念,:数据结构.数据结构是通过某种方式(例如对元素进行编号)组织在 一起的数据元素的集合,这些数据元素可以是数字或者字符,甚至可以是其他数据结构.在python中,最基本的数据结构 ...

  10. linux 实战使用,上传git 解决冲突

    Last login: Fri Dec 18 09:48:55 on ttys000lidongxiaodeiMac:~ lidongxiao$ cd /Users/lidongxiao/Docume ...