jquery实现点击控制div的显示和隐藏
我们使用点击显示、点击隐藏的时候,一般有两种可选方案
.示例 html
<div class="index">
<h1>
首页
</h1>
<button id="btn">点击</button>
</div>
最简单的方法:toggle() 点击显示 h1 和 点击 隐藏 h1
$(function () {
$("#btn").click(function () {
$("h1").toggle();
})
})
toggle() 的作用就是当对象是显示的就隐藏,当是隐藏的则显示。
<—————–>
果你除了显示和隐藏之外还需要同时实现其他功能的话,可以这样:
$(function () {
$("#btn").click(function(){
// 如果h1是显示的
if($("h1").hasClass("show")){
// 执行隐藏
$("h1").hide().removeClass("show");
// 其他
}else{
// 显示
$("h1").show().addClass("show");
}
})
})
这里通过自定义一个 class : show 来判断 div 是显示或隐藏
hasClass() 是否存在某个class
hide() 隐藏对象
show() 显示对象
removeClass() 移除一个class
addClass() 添加一个class
除此,还可以通过jquery设置这个 div 的 css : display:none/block 来实现隐藏/显示
jquery实现点击控制div的显示和隐藏的更多相关文章
- 简简单单,jquery中,使用checkbox控制div的显示与隐藏
今天开发代码时,发现好久不用jquery就生疏了. 所以作这个记录, 使用checkbox控制div的显示与隐藏. 一,html代码处: <input type="checkbox&q ...
- 微信小程序点击控制元素的显示与隐藏
微信小程序点击控制元素的显示与隐藏 首先我们先来看一下单个点击效果 我们来看一下wxml中的代码: <view class="conten"> <view cla ...
- 原生JS的移入溢出控制div的显示与隐藏
原生JS的移入溢出控制div的显示与隐藏的写法 上面的写法火狐存在兼容性
- js控制div样式显示与隐藏,JS通过点击超链接右边(指定位置)显示一个图标
原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...
- 仅使用css实现点击 控制元素的显示与隐藏!
视频教程:https://www.bilibili.com/video/BV1uE411Q7tx?p=15&spm_id_from=pageDriver 大致方法:在被点击的元素后面 放一个c ...
- jquery控制css的display(控制元素的显示与隐藏)
使用jquery控制div的显示与隐藏: $("#div的id").show()表示display:block, $("#div的id").hide()表示di ...
- jquery控制元素的显示与隐藏
比如要控制div的显示与隐藏,一句话就搞定了.$("#id").show()表示display:block,$("#id").hide()表示display:n ...
- jquery怎么实现点击一个按钮控制一个div的显示和隐藏
示例html 1 2 <div class="abc" style="display:none"></div> <input ty ...
- js 控制Div循环显示 非插件版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- Mysql中的WITH ROLLUP用法
1.WITH ROLLUP:在group分组字段的基础上再进行统计数据. 例子:首先在name字段上进行分组,然后在分组的基础上进行某些字段统计,表结构如下: CREATE TABLE `test` ...
- springboot、springsecurity、jwt权限验证
1.背景 基于前后端分离项目的后端模块: 2.相关技术 springboot全家桶 web模块 security模块:用于权限的验证 mongodb 模块:集成mogodb模块 jwt 用于token ...
- Maven项目POM文件错误,提示“Plugin execution not covered by lifecycle configuration”的解决方案
一. 问题 Plugin execution not covered by lifecycle configuration: org.apache.maven.plugins:maven-depend ...
- 折腾Java设计模式之解释器模
解释器模式 解释器模式是类的行为模式.给定一个语言之后,解释器模式可以定义出其文法的一种表示,并同时提供一个解释器.客户端可以使用这个解释器来解释这个语言中的句子. 意图 给定一个语言,定义它的文法表 ...
- H5页面的高度宽度100%
解决方案1: 设置如下:html,body{ min-height:100vh; background-color:#fff; }这样高度首先不会写死,而且满足最小高度是满屏 解决方案2: 可以用vh ...
- Laravel5多图上传和Laravel5单图上传的功能实现
Laravel5文件上传默认只能上传一张图片,但是有的时候我们需要一次性上传多图就不行了,我在网上看了很多关于laravel5图片上传的文章,很多都只是介绍laravel5单图上传,多图片上传介绍少之 ...
- 将Dynamics 365中的用户及其角色、角色导出到Excel中
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复240或者20161204可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong. ...
- EntityFramework实体默认值遇到Oracle自增主键
1. Oracle实现主键自动增长 一般我们在Oracle实现主键自动增长,通常通过序列加触发器实现. 定义序列用于获取递增数字 CREATE SEQUENCE 序列名 [INCREMENT BY n ...
- 在本地硬盘安装WinPE系统,实现UEFI引导,摆脱U盘
之前装系统一直用U盘装PE后再装系统,这次直接想把PE系统直接装在本地某个分区中,普通的PE制作工具只能直接装在一个硬盘里没法装在某个分区,百度发现没有一篇类似的文章,只能自己想办法了.目前的PE都支 ...
- pycharm设置自动换行的方法
只对当前文件有效的操作:菜单栏->View -> Active Editor -> Use Soft Wraps: 如果想对所有文件都有效,就要在setting里面进行操作:File ...