切换样式.toggleClass()
切换样式.toggleClass()
在做某些效果的时候,可能会针对同一节点的某一个样式不断的切换,也就是addClass与removeClass的互斥切换,比如隔行换色效果
jQuery提供一个toggleClass方法用于简化这种互斥的逻辑,通过toggleClass方法动态添加删除Class,一次执行相当于addClass,再次执行相当于removeClass
.toggleClass( )方法:在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即:如果存在(不存在)就删除(添加)一个类
- .toggleClass( className ):在匹配的元素集合中的每个元素上用来切换的一个或多个(用空格隔开)样式类名
- .toggleClass( className, switch ):一个布尔值,用于判断样式是否应该被添加或移除
- .toggleClass( [switch ] ):一个用来判断样式类添加还是移除的 布尔值
- .toggleClass( function(index, class, switch) [, switch ] ):用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数
注意事项:
- toggleClass是一个互斥的逻辑,也就是通过判断对应的元素上是否存在指定的Class名,如果有就删除,如果没有就增加
- toggleClass会保留原有的Class名后新增,通过空格隔开
切换样式.toggleClass()的更多相关文章
- 利用JavaScript来切换样式表
切换样式表 html页 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- angular ng-repeat点击切换样式,浅谈track by $index
前言 angular ng-repeat点击切换样式,ng-repeat点击切换class样式,巧用ng-repeat track by $index. 1.问题 一个ul包含多个li,li通过ng- ...
- WPF两个按钮来回切换样式
<!-- 两个按钮来回切换样式 --> <Style x:Key="SwicthFunctionMetroToggleButton" TargetType=&qu ...
- vue切换样式
在vue中使用事件来切换绑定的class样式,在vue-cli脚手架中的Home.vue中 <template> <div id="main"> <l ...
- 中高级前端应该必会,js实现事件委托代理、切换样式、元素获取相对于文档位置等
1.介绍 随着组件开发大流行,现在三大框架已经基本占领了整个前端. 这时候,我们要是引入一个 jq 是不是先得你的项目非常臃肿,jq 也很不适合. 这个时候,你就需要来增加你 js 的功底. 2.各种 ...
- vue点击切换样式,点击切换地址栏,点击显示或者隐藏
1. vue点击显示切换 :class='{"span":index==0}' class原本是 类选择器 加上 :class就是绑定属性的意思 '{"span" ...
- Silverlight button 图片切换样式
之前一直做WPF现在开始接触Slilverlight感触很多. 今天做一个Button要求 有两个图片,button默认有一个图片,鼠标over时用另一个图片, 用wpf做的时候写一个template ...
- 使用vue实现tab栏的点击切换样式
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- css根据屏幕大小切换样式
首先html head之间加入: <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, ma ...
随机推荐
- KVM-克隆和快照管理
kvm 虚拟机有两部分组成:img镜像文件和xml配置文件 /etc/libvirt/qemu #xml配置文件目录,存在虚拟机所有的详细信息 1.kvm虚拟机克隆 克隆命令 virt-clone - ...
- 【剑指offer】面试题 49. 丑数
面试题 49. 丑数 题目描述 题目:把只包含因子2.3和5的数称作丑数(Ugly Number).例如6.8都是丑数,但14不是,因为它包含因子7. 习惯上我们把1当做是第一个丑数.求按从小到大的顺 ...
- vim的保存文件和退出命令
文章来源:http://blog.sina.com.cn/s/blog_5e357d2d0100zmth.html 命令 简单说明 :w 保存编辑后的文件内容,但不退出vim编辑器.这个命令的作用是把 ...
- Git常用命令速查手册
Git组成 1.初始化仓库 git init 2.将文件添加到仓库 git add 文件名 # 将工作区的某个文件添加到暂存区 git add -u # 添加所有被tracked文件中被修改或删除的文 ...
- Jenkins实现CI(Continuous Integration)到CD(Continuous Delivery)
Pipeline as Code是2.0的精髓所在,是帮助Jenkins实现CI(Continuous Integration)到CD(Continuous Delivery)华丽转身的关键推手.所谓 ...
- JZYZOJ1376 [coci2011]友好数对 容斥定理 状态压缩
http://172.20.6.3/Problem_Show.asp?id=1376 题意:找给出的数中含有相同数字的数对的对数. mmp数论题竟然卡快读,莫名拉低通过率什么的太过分了. 刚开始想到了 ...
- 【记忆化搜索】codevs2823锁妖塔
[codevs2823]锁妖塔 Description 琐妖塔会在一会儿后倒塌.大量妖魔涌出塔去,塔内的楼梯都挤满了人(哦,错了,是妖),(那他们怎么不飞下去--)要求是,景天一行一定要下塔,琐妖塔一 ...
- 【Matrix-tree定理】【并查集】【kruscal算法】bzoj1016 [JSOI2008]最小生成树计数
题意:求一个图的最小生成树个数. 矩阵树定理:一张无向图的生成树个数 = (度数矩阵 - 邻接矩阵)的任意一个n-1主子式的值. 度数矩阵除了对角线上D[i][i]为i的度数(不计自环)外,其他位置是 ...
- python基础之模块,面向对象
hash 什么是hash? hash是一种算法,该算法接受传入的内容,经过运算得到一串hash值 为何用hash? hash值有三大特性: 1.只要传入的内容一样,得到的hash值必然一样 2.只要使 ...
- insert失败自动执行update(duplicate先insert)
例如:有一张表 字段有 id主键自增,或者唯一索引:datetime时间 name名字 INSERT INTO TABLE (id,datetime) VALUES (1,1440000000), ...