切换样式.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&ubuntu18.10安装Google浏览器
一.手动安装 1. 下载 rpm 包https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm 2. 安装依赖 ...
- spring mvc 表单提交 乱码
1.在web.xml添加过滤器: <filter> <filter-name>SpringCharacterEncoding</filter-name> <f ...
- 四十七 常用内建模块 XML
XML虽然比JSON复杂,在Web中应用也不如以前多了,不过仍有很多地方在用,所以,有必要了解如何操作XML. DOM vs SAX 操作XML有两种方法:DOM和SAX.DOM会把整个XML读入内存 ...
- Codeforces 1099 B. Squares and Segments-思维(Codeforces Round #530 (Div. 2))
B. Squares and Segments time limit per test 1 second memory limit per test 256 megabytes input stand ...
- textbox获取当前光标位置,在光标后面插入字符串
左侧输入要复制的字符串,点击复制btn,将左侧字符串复制到后侧, 示例: 输入框 复制后 12345 12345 (光标落在3后) aaa 123aaa45(光标落在4后 ...
- Linux操作命令(四)
本次实验将介绍 Linux 命令中 which.whereis.locate 命令的用法. which whereis locate 1.which which命令的作用是,在PATH变量指定的路径中 ...
- 2018CCPC 中国大学生程序设计竞赛 网络赛
链接 1.括号序列贪心/CF&51nod原题 [分析]: 贪心,每次到i的时候,假如你要在i里面要卖掉股票,获益是a[i], 肯定要在前面要么:1)把已经卖了的变成不买不卖,需要-a[j], ...
- sqlldr load UTF8 error
The default length semantics for all datafiles (except UFT-16) is byte. So in your case you have a C ...
- 【BZOJ 1478】 1478: Sgu282 Isomorphism (置换、burnside引理)
1478: Sgu282 Isomorphism Description 给 定一个N 个结点的无向完全图( 任意两个结点之间有一条边), 现在你可以用 M 种颜色对这个图的每条边进行染色,每条边必须 ...
- Android apk去广告
韩梦飞沙 yue31313 韩亚飞 han_meng_fei_sha 313134555@qq.com 下载地址: [北方网通] [电信网通] [下载说明] 1 点击上面的地址,打开下载页面 ...