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 ...
随机推荐
- C# Task ContinueWith的实现
看了上一篇C# Task 是什么?返回值如何实现? Wait如何实现 我们提到FinishContinuations方法中会调用TaskContinuation实例,那么我们的ContinueWith ...
- 【Java】maven多项目资源共享
方案一: <resources> <resource> <!-- <directory>${project.parent.relativePath}/../. ...
- mybatis 批量添加
<insert id="addTrackBatch" parameterType="java.util.List"> INSERT INTO t_t ...
- Docker 安装和基础用法
理解Docker(1):Docker 安装和基础用法 本系列文章将介绍Docker的有关知识: (1)Docker 安装及基本用法 (2)Docker 镜像 (3)Docker 容器的隔离性 - 使用 ...
- Docker 下载镜像慢的问题解决方法
让你火箭般的速度下载docker镜像! 的冷漠度 百家号17-11-1713:09 因为有墙的原因所以在国内下载docker镜像的速度非常慢,有时候是几kb每秒,那个蛋疼的等待,真是谁等谁知道!下面我 ...
- 利用StringEscapeUtils来转义和反转义html/xml/javascript中的特殊字符
我们经常遇到html或者xml在Java程序中被某些库转义成了特殊字符. 例如: 各种逻辑运算符: > >= < <= == 被转义成了 == ...
- [Python设计模式] 第19章 分公司=部门?——组合模式
github地址:https://github.com/cheesezh/python_design_patterns 组合模式 组合模式,将对象组合成树形结构以表示"部分-整体" ...
- Sandcastle Help File Builder(.NET帮助文档工具)的版本选择心得——支持VS2010至VS2015,高版本项目文件问题
作者: zyl910 一.缘由 "Sandcastle Help File Builder"(简称SHFB)是一个很好用.NET 帮助文档生成工具. 但它的每个版本支持的VS版本范 ...
- kuda 了解片
本来上个月想去了解一下kuda的,结果一直没有抽出时间去搞,现在大致先开个头,方便后面深入! Apache Kudu是开源Apache Hadoop生态系统的新成员,它完善了Hadoop的存储层,可以 ...
- Docker在windows下的使用【一】
1.windows按照docker的基本要求 (1)64为操作系统,win7或者更高 (2)支持“ Hardware Virtualization Technology”,并且,“virtualiza ...