【功能代码】---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】
【功能代码】---5 JS通过事件隐藏显示元素的更多相关文章
- 【JS】---5 JS通过事件隐藏显示元素
JS通过事件隐藏显示元素 在开发中,很多时候我们需要点击事件,才显示隐藏元素.那如何做到页面刚开始就把标签隐藏. 有两种方法: (1) display:none <div id=" ...
- JS控制DIV隐藏显示
转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...
- 基于特定值来推断隐藏显示元素的jQuery插件
jQuery-Visibly是一款小巧简单的jQuery隐藏显示元素插件.该插件依据某个元素的值,例如以下拉框的值.输入框的值等来推断是否显示某个指定的元素. 用于推断的值能够是单个值,或者是多个值, ...
- js控制tr 隐藏 显示
tr td 外面不要套div <tr> <td>排期确定结果: </td> <td> <label class="liradio&quo ...
- js判断display隐藏显示
// 判断是否为隐藏(css)样式 function isHide(obj) { var ret = obj.style.display === "none" || obj.s ...
- js如何获取隐藏的元素的高度
首先,正常情况下,确保div是有高度的. <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- 多行溢出隐藏显示省略号功能的JS实现
在页面重构中,经常需要将过多的内容隐藏而显示部分.在单行文本中实现非常简单,但是在多行文本中,则需要根据实际选择不同的方式. 用CSS实现多行溢出隐藏的代码非常简单,但是兼容性也相对较低. displ ...
- js(jquery)鼠标移入移出事件时,出现闪烁、隐藏显示隐藏显示不停切换的情况
<script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...
- Android软键盘的隐藏显示、事件监听的代码
把开发过程中重要的一些内容片段做个珍藏,如下资料是关于Android软键盘的隐藏显示.事件监听的内容,应该是对小伙伴们有所用途. public class ResizeLayout extends L ...
随机推荐
- Python学习一:序列基础详解
作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/7858473.html 邮箱:moyi@moyib ...
- Python待分析的模块
fcntl 文件控制模块 http://docs.python.org/2.7/library/fcntl.html#module-fcntl struct 二进制文本处理模块 http://docs ...
- Linux 计划任务总结
今天项目用到了,Linux计划任务,从网上找了基本blog看了,总结了下. Linux 下的计划任务有atd和crond两种计划任务.atd服务使用的at命令只能执行一次,而crond服务使用的cro ...
- js实际工作中的技能点
1.基础知识 a.原型,原型链 b.作用域,闭包 c.异步,单线程 2.JS API a.DOM操作 b.Ajax c.事件绑定 3.开发环境 a.版本管理(git) b.模块化(require.js ...
- border-sizing属性
box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box. content-box,border和padding不计算入widt ...
- 件测试博客日记Day03-11.17日 —— 赵天宇 —— 禅道的使用和配置详细版
说在维基百科先查找关于禅道相关知识,发现有关于禅道这个项目管理软件的详细介绍,然后将相关的介绍进行整理写入文档,在禅道的介绍中也有下载地址并进行安装. (1)软件的基本情况 a.中文名称:禅道项目管理 ...
- Gotorch - 多机定时任务管理系统
* { color: #3e3e3e } body { font-family: "Helvetica Neue", Helvetica, "Hiragino Sans ...
- Python——正则表达式
此篇文章结合小甲鱼的笔记和视频整理. 1 编译 Python 通过 re 模块为正则表达式引擎提供一个接口,同时允许你将正则表达式编译成模式对象,并用它们来进行匹配. 正则表达式被编译为模式对象,该对 ...
- 从实战出发,谈谈 nginx 信号集
前言 之前工作时候,一台引流测试机器的一个 ngx_lua 服务突然出现了一些 HTTP/500 响应,从错误日志打印的堆栈来看,是不久前新发布的版本里添加的一个 Lua table 不存在,而有代码 ...
- 四、Hadoop学习笔记————各种工具用法
hive基本hql语法 Sqoop(发音:skup)是一款开源的工具,主要用于在Hadoop(Hive)与传统的数据库(mysql.postgresql...)间进行数据的传递,可以将一个关系型数据库 ...