【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】
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· Obsidian + DeepSeek:免费 AI 助力你的知识管理,让你的笔记飞起来!
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了