jquery怎么实现点击一个按钮控制一个div的显示和隐藏
示例html
1
2 <div class="abc" style="display:none"></div>
<input type="button" class="but" />
最简单的方法:
1
2
3
4
5
6
7 <script>
$(document).ready(function(e) {
$(".but").click(function(e) {
$(".abc").toggle();
});搜索
});
</script>
toggle() 的作用就是当对象是显示的就隐藏,当是隐藏的则显示。
------
如果你除了显示和隐藏之外还需要同时实现其他功能的话,可以这样:
1
2
3
4
5
6
7
8
9
10
11
12
13
14 <script>
$(document).ready(function(e) {
$(".but").click(function(e) {
if( $(".abc").hasClass("show") ){
// 执行隐藏
$(".abc").hide().removeClass("show");
// 其他
}else{
// 显示
$(".abc").show().addClass("show");
}
});
});
</script>
这里通过自定义一个 class : show 来判断 div 是显示或隐藏
hasClass() 是否存在某个class
hide() 隐藏对象
show() 显示对象
removeClass() 移除一个class
addClass() 添加一个class
除此,还可以通过jquery设置这个 div 的 css : display:none/block 来实现隐藏/显示
jquery怎么实现点击一个按钮控制一个div的显示和隐藏的更多相关文章
- jquery实现点击控制div的显示和隐藏
我们使用点击显示.点击隐藏的时候,一般有两种可选方案 .示例 html <div class="index"> <h1> 首页 </h1> &l ...
- 设置一个按钮为一个图片,不要border
//设置一个按钮为一个图片,不要border ImageIcon searchIcon = ImageToolkit.loadImageIcon(/search.png"); ImageIc ...
- 简简单单,jquery中,使用checkbox控制div的显示与隐藏
今天开发代码时,发现好久不用jquery就生疏了. 所以作这个记录, 使用checkbox控制div的显示与隐藏. 一,html代码处: <input type="checkbox&q ...
- jquery判断div是否显示或者隐藏
jquery判断div是否显示或者隐藏 很多时候会要判断一个div是不是显示着,没显示要怎么处理,显示的如何处理: 方法很简单,选择到你要判断的div,再用is(':hidden')判断是否隐藏:或者 ...
- JS控制HTML元素的显示和隐藏
JS控制HTML元素的显示和隐藏 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 ...
- 利用来JS控制页面控件显示和隐藏有两种方法
利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 document.getEle ...
- 原生JS的移入溢出控制div的显示与隐藏
原生JS的移入溢出控制div的显示与隐藏的写法 上面的写法火狐存在兼容性
- 使用JavaScript控制HTML元素的显示和隐藏
利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementB ...
- 【读书笔记】iOS-storyBoard-为一个按钮添加一个点击事件
按照故事板的用语,应用中的一个界面屏幕被称作一个”场景(Scene)",以后添加额外的场景时,停靠区中将有另一个部分. 一,新建立一个工程,如图所示. 二,选中Main.storyboard ...
随机推荐
- 小程序longpress的bug及其解决
我的小程序中,用到一个长按修改的功能,设计是这样的,短按tap,长按longpress 但是,偶尔出现长按无效的情况.我自己都经常碰到,今天仔细研究,用半天时间反复寻找,重现,发现问题和内存或别的因素 ...
- fopen_s遇到的一个问题
今天使用公司代码的日志模块记录程序运行的相关信息,发现日志总是只有两条记录,即程序启动和结束,别的都没有.跟踪了很久,终于发现是日志输出模块被我修改了一个地方:把fopen改成了fopen_s,毕竟报 ...
- [Python设计模式] 第16章 上班,干活,下班,加班——状态模式
github地址:https://github.com/cheesezh/python_design_patterns 题目 用代码模拟一天的工作状态,上午状态好,中午想睡觉,下午渐恢复,加班苦煎熬. ...
- 网页出现400 Bad Request Request Header Or Cookie Too Large错误的解决方法
在开发项目过程中,突然遇到400 Bad Request Request Header Or Cookie Too Large的报错,我也是第一次出现这样的错误,感觉还是挺新奇的. 分析下出现错误的原 ...
- 【PHP】PHP的安装和配置
PHP(外文名:PHP: Hypertext Preprocessor,中文名:“超文本预处理器”)是一种通用开源脚本语言.语法吸收了C语言.Java和Perl的特点,利于学习,使用广泛,主要适用于W ...
- XAMARIN上运行IPHONE模拟器
重装农药第32天!!! 今天弄XAMARIN运行IPHONE模拟器,前提是需要MAC 同时在开着,然后打开昨天 建立的HELLO WORLD项目,选择APP1.IOS,直接点右边的三角运行即可,他会自 ...
- [k8s]k8s的控制层kubelet+docker配合调度机制(k8架构)
意外停掉一台node的kubelet,发现调度有问题,研究了下调度的细节 k8s架构 控制层- kubelet(配合节点docker工作) 数据层- kube-proxy 逻辑图: object 参考 ...
- linux epoll学习
#include <sys/time.h> /* For portability */ #include <sys/select.h> int select(int nfds, ...
- 解决ubuntu下IntelliJ IDEA无法锁定到启动器的问题
参考:https://www.zhihu.com/question/31626161 在目录~/.local/share/applications 中找到以前的IDEA的.desktop文件,删掉即可
- phpunit assert断言分类整理
布尔类型 方法名 含义 参数 返回值 assertTrue 断言为真 assertFalse 断言为假 NULL类型 方法名 含义 参数 返回值 assertNull 断言为NULL ...