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】

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

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

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

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

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

  3. js鼠标移入移出事件会被子元素触发解决方法

    问题:js写了一个鼠标移入移出事件,但是发现会被内部子元素不断的触发 解决方法:建立一个空的div定位到需要触发的位置,然后设置大小和触发范围一样,最后将事件写在空的div上.

  4. vue.js click点击事件获取当前元素对象

    Vue.js可以传递$event对象 <body id="app"> <ul> <li v-on:click="say('hello!', ...

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

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

  6. js单击显示元素,点击元素本身以外隐藏元素

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

  7. js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框

    转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...

  8. js基础--浏览器标签页隐藏或显示状态 visibility详解

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 在工作中我们可能会遇到这样的需求,当浏览器切换到别的标签页或着最小化时,我们需要暂停页面上正在播放的视频或者音乐,这个需求 ...

  9. Vue 使用Spread.js没有层级关系(隐藏与显示)

    Vue 使用Spread.js没有层级关系(隐藏与显示) 1.vue会给元素加一个监控属性.去掉 spread.js没有层级关系过半是column中值的问题

随机推荐

  1. C#数组1

    using System; namespace ConsoleApp3 { class Program { static void Main(string[] args) { , , , , , }; ...

  2. python基础(20):序列化、json模块、pickle模块

    1. 序列化 什么叫序列化——将原本的字典.列表等内容转换成一个字符串的过程就叫做序列化. 1.1 为什么要有序列化 为什么要把其他数据类型转换成字符串?因为能够在网络上传输的只能是bytes,而能够 ...

  3. 用Python在Excel里画出蒙娜丽莎

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 麦麦麦造 PS:如有需要Python学习资料的小伙伴可以加点击下方链 ...

  4. PHP+Ajax微信手机端九宫格抽奖实例

    PHP+Ajax结合lottery.js制作的一款微信手机端九宫格抽奖实例,抽奖完成后有收货地址添加表单出现.支持可以设置中奖概率等. 奖品列表 <div class="lottery ...

  5. iOS UItableview 镶嵌 collectionView ,cell 自适应高度动态布局

    最近在写这个功能,之前看到很多,可是需求一直没有涉及到,大致思路是有的,发现,网上的大部分都有缺陷和bug,我也是好无语啦啦啦,也不晓得是不是升级 了xcode,一样的代码,允许的效果都不一样,,,苦 ...

  6. 安卓开发笔记(三十三):Android仿写微信发现

    首先我们来看看仿写之后的效果: 看到是这个界面我们首先应该思考这些按钮是怎么做出来的?有了一个整体的思路之后才知道该怎么办.最开始我想的就直接利用button控件上面直接加上png的图片就可以形成一个 ...

  7. BayaiM__Oracle ASM操作管理

    BayaiM__Oracle ASM操作管理   BayaiM__Oracle ASM操作管理                                                      ...

  8. MySQL 部署 MHA 高可用架构 (一)

    MHA 官方网址 Manager : https://github.com/yoshinorim/mha4mysql-manager Node : https://github.com/yoshino ...

  9. emacs 窗口控制

    1,调整窗口大小 c-c ^ 窗口变高 c-c } 窗口变宽 c-c { 窗口变窄 2,窗口间移动 ;;这一条语句的作用是让 windmove 在边缘的窗口也能正常运作.举个例子,当前窗口已\\ 经是 ...

  10. 通过 Beautiful Soup 4 预防 XSS 攻击

    通过beautifulsoup4预防XSS攻击 借助beautifulsoup4将用户输入内容进行过滤 实际使用时需要采用单例模式 步骤: 实例化对象,对页面进行解析 查找目标标签 将非法标签进行清空 ...