JS通过事件隐藏显示元素

在开发中,很多时候我们需要点击事件,才显示隐藏元素。那如何做到页面刚开始就把标签隐藏。

有两种方法:

(1) display:none
    <div id="id" style="display:none"><div>

(2)hidden          
   <input type="hidden" id="his" value="haha">

这两种都能实现标签的隐藏,那他们有什么区别呢
      我们说说display:none;与visibility:hidden;的区别
   display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到。
   visiblility:hidden--- 使对象在网页上不可见,但该对象在网页上所占的空间没有改变,通俗来说就是看不见但摸得到。

用代码来理解:

  那如何通过事件让他们显示:

对于第二种,我们没有必要让他显示了,一般设置hidden的目的就是获取该标签里面的数据,又不想让他显示在界面上。

对于第一种我们可以通过改变样式让他显示:

$('#id').css('display','block');  //通过改变样式让它显示

另外还有一种是出发事件,隐藏已经显示的元素,这个就忒简单了
     只要用jquery事件

  $('#id').hide();    //隐藏
$('#id').show(); //让上面隐藏的显示,哇好简单

水滴石穿,成功的速度一定要超过父母老去的速度! 少尉【7】

【功能代码】---5 JS通过事件隐藏显示元素的更多相关文章

  1. 【JS】---5 JS通过事件隐藏显示元素

    JS通过事件隐藏显示元素 在开发中,很多时候我们需要点击事件,才显示隐藏元素.那如何做到页面刚开始就把标签隐藏. 有两种方法: (1) display:none    <div id=" ...

  2. JS控制DIV隐藏显示

    转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...

  3. 基于特定值来推断隐藏显示元素的jQuery插件

    jQuery-Visibly是一款小巧简单的jQuery隐藏显示元素插件.该插件依据某个元素的值,例如以下拉框的值.输入框的值等来推断是否显示某个指定的元素. 用于推断的值能够是单个值,或者是多个值, ...

  4. js控制tr 隐藏 显示

    tr td 外面不要套div <tr> <td>排期确定结果: </td> <td> <label class="liradio&quo ...

  5. js判断display隐藏显示

    // 判断是否为隐藏(css)样式 function isHide(obj) {   var ret = obj.style.display === "none" || obj.s ...

  6. js如何获取隐藏的元素的高度

    首先,正常情况下,确保div是有高度的. <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  7. 多行溢出隐藏显示省略号功能的JS实现

    在页面重构中,经常需要将过多的内容隐藏而显示部分.在单行文本中实现非常简单,但是在多行文本中,则需要根据实际选择不同的方式. 用CSS实现多行溢出隐藏的代码非常简单,但是兼容性也相对较低. displ ...

  8. js(jquery)鼠标移入移出事件时,出现闪烁、隐藏显示隐藏显示不停切换的情况

    <script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...

  9. Android软键盘的隐藏显示、事件监听的代码

    把开发过程中重要的一些内容片段做个珍藏,如下资料是关于Android软键盘的隐藏显示.事件监听的内容,应该是对小伙伴们有所用途. public class ResizeLayout extends L ...

随机推荐

  1. 同步docker的时间

    因为在没设置的docker中,其时间与主机相差8小时. 在docker命令行中输入  # echo "Asia/Shanghai" > /etc/timezone# dpkg ...

  2. 使用Recovery Services备份文件及文件夹

    1.创建恢复服务保管库 2.在backup项中选择本地,备份文件和文件夹选项 3.根据提示下载Agent及保管库凭据 4.在文件服务器上安装Agent 5.选择"继续注册"项,并添 ...

  3. Spring AOP高级——源码实现(3)AopProxy代理对象之JDK动态代理的创建过程

    spring-aop-4.3.7.RELEASE  在<Spring AOP高级——源码实现(1)动态代理技术>中介绍了两种动态代理技术,当然在Spring AOP中代理对象的生成也是运用 ...

  4. C++语言中的类型(二)

    --分门别类是简化事物最有效的方式. C++语言的强大能力的体现在对程序员自定义数据类型的支持.C++语言主要的一个设计目标就是让程序员自定义的数据类型像内置类型一样好用. 一.自定义数据类型 数据类 ...

  5. 状态压缩 - LeetCode #464 Can I Win

    动态规划是一种top-down求解模式,关键在于分解和求解子问题,然后根据子问题的解不断向上递推,得出最终解 因此dp涉及到保存每个计算过的子问题的解,这样当遇到同样的子问题时就不用继续向下求解而直接 ...

  6. 字节、十六进制字符串相互转换(asc2hex、hex2asc)

    //================================================================== /** 功能: 将16进制数组转换成asc字符数组(短转长) ...

  7. redis配置文件之复制

    主从复制使用slaveof将Redis实例作为另一个Redis服务器的副本. 1) Redis复制是异步的,master可以配置成如果它连接的slave没有达到给定的数量,就停止接受写入.2) 如果断 ...

  8. Android Weekly Notes Issue #285

    November 26th, 2017 Android Weekly Issue #285 本周包含好几篇Kotlin的文章,如通过Property Delegate实现SharedPreferenc ...

  9. tensorflow初探

    TensorFlow是一个采用数据流图,用于数值计算的开源软件库.自己接触tensorflow比较的早,可是并没有系统深入的学习过,现在TF在深度学习已经成了"标配",所以打算系统 ...

  10. javascript的BOM,DOM对象

    BOM对象 window对象 所有浏览器都支持 window 对象.概念上讲.一个html文档对应一个window对象.功能上讲: 控制浏览器窗口的.使用上讲: window对象不需要创建对象,直接使 ...