切换样式.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 ...
随机推荐
- CentOS7.5安装网易云音乐
CentOS7中一直没有一个像样的音乐播放器,网易云音乐与深度科技团队在半年前就启动了“网易云音乐Linux版“, 但是只提供了Ubuntu(14.04&16.04)和deepin15版本,并 ...
- lr中exit(-1)和return 0的区别
LR脚本实践:关于lr中exit(-1)和return 0的区别 exit(-1):从当前action里面exit(-1)所在行,当前迭代里面直接退出来,终止运行: return 0:忽略当前acti ...
- Visual Studio找不到adb.exe错误解决
Visual Studio找不到adb.exe错误解决 错误信息:Cannot find adb.exe in specified SDK path.出现这种情况,是因为没有安装Android SDK ...
- 设计模式之State模式
State模式定义: 允许一个对象在状态改变是,改变它的行为.看起来对象似乎修改了它的类. 模式理解(个人): State模式主要解决的事在开发中时常遇到的根据不同状态需要进行不同的处理操作的问题,而 ...
- bzoj 2137: submultiple
Time Limit: 10 Sec Memory Limit: 259 MB Submit: 23 ...
- 【并查集】星球大战starwar
BZOJ1015: [JSOI2008]星球大战starwar Time Limit: 3 Sec Memory Limit: 162 MBSubmit: 6407 Solved: 2973[Su ...
- 【Heap-dijkstra】CDOJ1639 云中谁寄锦书来?雁字回时,月满西楼。
题意: 在n个点m条边的无向图上,有k个出口 从起点出发,每到一个点(包括起点),该点连出的边中有d条会被封锁 求最坏情况下到达出口的最短路 题解: 该题为dijkstra算法的拓展 由于求最坏情况下 ...
- 【优先队列+贪心】POJ2431-Expedition
解题方法详见<挑战程序设计竞赛(第二版)>P74-75.注意首先要对加油站以位置为关键字快排,不要遗忘把终点视作一个加油量为0的加油站,否则最终只能到达终点前的加油站. /*优先队列*/ ...
- 4425: [Nwerc2015]Assigning Workstations分配工作站
4425: [Nwerc2015]Assigning Workstations分配工作站 Description Penelope is part of the admin team of the n ...
- linux centos下安装docker
1.在vm中装好好centos后,更新内核 运行docker需要内核版本为3.8或者更高的版本,内核必须支持一种合适的存储驱动(Drivice Mapper.AUFS.vfs.btrfs.ZFS),默 ...