【JS】---5 JS通过事件隐藏显示元素
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通过事件隐藏显示元素的更多相关文章
- 【功能代码】---5 JS通过事件隐藏显示元素
JS通过事件隐藏显示元素 在开发中,很多时候我们需要点击事件,才显示隐藏元素.那如何做到页面刚开始就把标签隐藏. 有两种方法: (1) display:none <div id=" ...
- 基于特定值来推断隐藏显示元素的jQuery插件
jQuery-Visibly是一款小巧简单的jQuery隐藏显示元素插件.该插件依据某个元素的值,例如以下拉框的值.输入框的值等来推断是否显示某个指定的元素. 用于推断的值能够是单个值,或者是多个值, ...
- js鼠标移入移出事件会被子元素触发解决方法
问题:js写了一个鼠标移入移出事件,但是发现会被内部子元素不断的触发 解决方法:建立一个空的div定位到需要触发的位置,然后设置大小和触发范围一样,最后将事件写在空的div上.
- vue.js click点击事件获取当前元素对象
Vue.js可以传递$event对象 <body id="app"> <ul> <li v-on:click="say('hello!', ...
- js(jquery)鼠标移入移出事件时,出现闪烁、隐藏显示隐藏显示不停切换的情况
<script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...
- js单击显示元素,点击元素本身以外隐藏元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框
转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...
- js基础--浏览器标签页隐藏或显示状态 visibility详解
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 在工作中我们可能会遇到这样的需求,当浏览器切换到别的标签页或着最小化时,我们需要暂停页面上正在播放的视频或者音乐,这个需求 ...
- Vue 使用Spread.js没有层级关系(隐藏与显示)
Vue 使用Spread.js没有层级关系(隐藏与显示) 1.vue会给元素加一个监控属性.去掉 spread.js没有层级关系过半是column中值的问题
随机推荐
- KB奇遇记(3):糟糕的IT现状
2015年8月3号,终于告别了过去来到了KB. 公司给安排的住房是一间套房里的小房间,小的简直连坐的地方都没有了,中间一个大床将房间隔了两边,显得特别狭小.由于是刚来,我也不好要求太多.但就这个小房间 ...
- CODING 签约天津大学,助力高校“产学”接轨
近日,CODING 与天津大学顺利达成合作,将通过 CODING 的一站式 DevOps 解决方案为天津大学师生提供软件研发管理方面的先进理念和产品. 根据中共中央.国务院印发的<中国教育现代化 ...
- python生产者和消费者模式实现(一)普通方式
import timeimport randomfrom multiprocessing import Queue # 生产者def producer(q, num): for i in range( ...
- OSI模型级各层功能
OSI(Open System Interconnection 即 开放系统互联)国际标准化组织(ISO)制定了OSI模型,该模型定义了不同计算机互联的标准,是设计和描述计算机网络通信的基本框架.OS ...
- 【bzoj2648】SJY摆棋子(kdtree)
传送门 题意: 二维平面上有若干个点. 现在要维护一种数据结构,支持插入一个点以及询问其余点到某个点的最小曼哈顿距离. 思路: 这是个\(kdtree\)模板题. \(kdtree\)是一种可以高效处 ...
- Sqlserver 2014 下载
ed2k://|file|cn_sql_server_2014_enterprise_edition_x64_dvd_3932882.iso|2898847744|A33CE10CD989083D1A ...
- 201271050130-滕江南-《面向对象程序设计(java)》第十五周学习总结
201271050130-滕江南-<面向对象程序设计(java)>第十五周学习总结 博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.c ...
- python的wraps函数
当使用@修饰符修饰函数时,会存在这样一个问题:被修饰的函数会消失(这是因为修饰函数没有设置返回值,如果设置了返回值,则就把返回值赋给被修饰函数,比如,test1函数的返回值设置为 return 6, ...
- tensorflow的MNIST教程
(ps:根据自己的理解,提炼了一下官方文档的内容,错误的地方希望大佬们多多指正.....) 0x01:数据集的获取和表示 数据集的获取,可以通过代码自动下载.这里的数据就是各种手写数字图片和图片对应的 ...
- 快速傅里叶变换(FFT)学习笔记
定义 多项式 系数表示法 设\(A(x)\)表示一个\(n-1\)次多项式,则所有项的系数组成的\(n\)维向量\((a_0,a_1,a_2,\dots,a_{n-1})\)唯一确定了这个多项式. 即 ...