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/ ...
随机推荐
- JavaScript技巧(未完成)
1.在js脚本语言中使用HTML语言中的< >号,但是在XHTML中却不能使用这类符号,可以将<号转换成<符号(XHTML比HTML跟严格),这种做法比较不好理解,可以用 ...
- 浏览器登录Dynamics 365 CE没毛病,程序连接却报错。
摘要: 微软动态CRM专家罗勇 ,回复308或者20190308可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me . 今天我做实验 ...
- 12月16日广州.NET俱乐部下午4点爬白云山活动
正如我们在<广州.NET微软技术俱乐部与其他技术群的区别>和<广州.NET微软技术俱乐部每周三五晚周日下午爬白云山活动>里面提到的, 我们会在每周三五晚和周日下午爬白云山. ...
- 从零学习Fluter(三):Flutter的路由跳转以及state的生命周期
今天继续研究Flutter,我是在flutter1.0发布后,才玩flutter的,发现在此之前,许多人已经先发制人,玩起了flutter,不知不觉中,我已经被别人摔在了起跑线上,玩过flutter后 ...
- Android Studio 代码无提示,无颜色区分
一.问题 ①java代码没有颜色区分,统一黑色 ②代码不会联想提示,原来打前几个字母便会联想到后面的内容 二.解决 打开File,将Power save Mode的勾勾去掉
- ADOConnection断线重连
问题: ADOConnection断线重连问题描述: 使用ADOConnection连接oracle数据库,开始正常,当网络断开时数据库连接失败(此时查询ADOConnection.connected ...
- Oracle database link中查询会开启事务吗?
关于oracle database link,使用database link相关的查询语句是否会开启事务呢?我们知道,在数据库中一个简单的SELECT查询语句不会产生事务(select for upd ...
- 修改vue element Transfer 穿梭框里内容区的宽度
<template> <el-transfer v-model="value1" :data="data"></el-transf ...
- LeetCode算法题-Reverse Words in a String III(Java实现)
这是悦乐书的第259次更新,第272篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第126题(顺位题号是557).给定一个字符串,您需要反转句子中每个单词中的字符顺序,同 ...
- LeetCode算法题-Minimum Moves to Equal Array Elements(Java实现)
这是悦乐书的第233次更新,第246篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第100题(顺位题号是453).给定大小为n的非空整数数组,找到使所有数组元素相等所需的 ...