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. Python的egg包

    1.背景 查看flower的源码,首先看到flower的主程序如下: #!/usr/local/sinasrv2/bin/python2.7 # EASY-INSTALL-ENTRY-SCRIPT: ...

  2. sysbench

    安装 http://www.cnblogs.com/zhoujinyi/archive/2013/04/19/3029134.html http://space.itpub.net/758322/vi ...

  3. Cngigure和BUS实现远端配置

    1 server依赖 <?xml version="1.0" encoding="UTF-8"?><project xmlns="h ...

  4. 实战Excel Add-in的三种玩法

    作者:陈希章 发表于 2017年11月26日 前言 这个系列文章应该有一阵子没有更新了,原因是一如既往的多,但是根本所在是我对于某些章节其实还没有完全想好怎么写,尤其是对于Office Add-in这 ...

  5. phpstorm-----实现实时编辑服务器代码

    phpstorm是一款功能强大.广大码农钟爱的编辑器,也是我最常用的编辑器.这里介绍一个偷懒的功能. 用sftp协议与远程服务器相连接,实现直接编辑服务器代码的功能.而效果就是ctrl+s不仅可以保存 ...

  6. Centos下mongodb的安装与配置

    安装MongoDB的方法有很多种,可以源代码安装,在Centos也可以用yum源安装的方法. 1.准备工作 运行yum命令查看MongoDB的包信息 yum info mongodb-org (提示没 ...

  7. 对于String 与StringBuffer 和StringBuilder的总结

    StringBuffer   1,线程安全的可变字符序列.一个类似于 String 的字符串缓冲区,但不能修改 2,虽然在任意时间点上它都包含某种特定的字符序列,但通过某些方法调用可以改变该序列的长度 ...

  8. 十五、Hadoop学习笔记————Zookeeper客户端的使用

    timeout表示会话超时时间,zookeeper靠与客户的心跳来判断会话是否有效(单位毫秒), -r为只读,表示zookeeper如果与半数以上服务器失去连接则会停止服务,如果有-r参数,则会继续保 ...

  9. 0:A+B Problem-poj

    0:A+B Problem 总时间限制:  1000ms 内存限制:  65536kB 描述 Calculate a + b 输入 Two integer a,,b (0 ≤ a,b ≤ 10) 输出 ...

  10. Code Kata:超级偶数数列 javascript实现

    超级偶数(SuperEven)是指每一位都是偶数的正整数,例如: 0,2,4,6,8,20,22,24,26,28,40,...,88,200,202,... 要求写一个函数,输入项数n,返回数列第n ...