【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中值的问题
随机推荐
- vsto 以隐藏的方式打开一个excel 文件 并获得excel文件的缩略图
public byte[] GetExcelPictureFile(string filepath) { Workbook workbook=null; Microsoft.Office.Intero ...
- Java生鲜电商平台-促销架构以及秒杀解决方案实战
Java生鲜电商平台-促销架构以及秒杀解决方案实战 背景:随着这几年的电商的大热,我们经常看到一些商家为了促销和快速收益,纷纷推出了秒杀活动.不管是日常的超市里面的促销,明星演唱会门票售卖,还是春节订 ...
- docker环境无法执行jmap -heap 56命令
很奇怪的问题,但是jstack可以执行 解决方法: docker 内部使用jmap 需要启动容器时候配置权限:docker run --privileged=true --cap-add=SYS_P ...
- 表单_HTML
HTML表单_输入元素 大多数情况被用到的表单标签是输入标签 输入类型是由类型属性(type)定义的. 表单中的单选按钮可以设置以下几个属性:value.name.checked value:提交数据 ...
- [b0032] python 归纳 (十七)_线程同步_信号量Semaphore
代码: # -*- coding: utf-8 -*- """ 多线程并发同步 ,使用信号量threading.Semaphore 逻辑: 多个线程,对同一个共享变量 , ...
- MySQL 主从复制开启 GTID
GTID (Golobal Transaction ID) 是对于一个已提交事务的唯一编号,并且是一个全局(主从复制)唯一的编号. GTID 复制和传统复制的区别:在启动主从复制时,不需要指定 bin ...
- 关于ML.NET v1.0 的发布说明
今天,我们很高兴宣布发布 ML.NET 1.0.ML.NET 是一个免费的.跨平台的开源机器学习框架,旨在将机器学习(ML)的强大功能引入.NET 应用程序. ML.NET GitHub:https: ...
- fetchone函数和fetchall函数返回值的区别
fetchone函数和fetchall函数返回值的区别 1.fetchone() 返回单个的元组,也就是一条记录(row),如果没有结果,则python返回 None 有结果时,如图: 没结果时,如 ...
- 02-align-items的用法
侧轴是相对的 默认主轴是x 所以侧轴就是y轴 align-items设置侧轴上的子元素排列的方式(单行)纵轴方向上的对齐方式 align-items: flex-start; 顶部对齐 align-i ...
- HTML简介 页面标记
HTML简介 HTML 1.0 : 1993年 HTML 2.0 : 1995年 HTML 3.2 : 1997年 HTML 4.01 : 1999年 HTML 5 : 2008年 XML:可扩展标 ...