切换样式.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 ...
随机推荐
- spring mvc 表单提交 乱码
1.在web.xml添加过滤器: <filter> <filter-name>SpringCharacterEncoding</filter-name> <f ...
- Java中多线程问题
线程调度中的方法: sleep() 顾名思义线程休眠可传递连个参数-@毫秒 @纳秒 yield() 暂时挂起 这里的线程会释放资源,但是有一个坑是虽然是释放资源但是是公平竞争资源 如:a线程释放资源后 ...
- [jquery] 遍历select的option,然后设置一项为选中
<script> var v={$menu.pid}; $("#pid option").each(function(){ if($(this).val()==v){ ...
- 2018 icpc 徐州现场赛G-树上差分+组合数学-大佬的代码
现场赛大佬打印的代码,观摩了一哈. 写了注释,贴一下,好好学习.%%%PKU 代码: //树上差分(LCA) #include<bits/stdc++.h> #define For(i,x ...
- 680. Valid Palindrome II【Easy】【双指针-可以删除一个字符,判断是否能构成回文字符串】
Given a non-empty string s, you may delete at most one character. Judge whether you can make it a pa ...
- SSH整合错误三连
访问Action错误 ognl.MethodFailedException: Method "add" failed for object com.test3.action.Use ...
- Linux命令之nice和renice
(1).nice命令 nice [选项] [命令 [参数]] 在执行程序之前,改变优先级.以调整过的优先级运行命令.如果没有给出命令,就显示当前的优先级.优先级范围从-20到19,越小优先级越高,默认 ...
- Xamarin开发安装Visual Studio 2015 update2报错的解决办法
Xamarin开发安装Visual Studio 2015 update2报错的解决办法错误信息:update 2 requires a member of the visual studio 201 ...
- DP套DP
DP套DP,就是将内层DP的结果作为外层DP的状态进行DP的方法. [BZOJ3864]Hero meet devil 对做LCS的DP数组差分后状压,预处理出转移数组,然后直接转移即可. tr[S] ...
- wannafly挑战赛14
第一次打wannafly..觉得自己好菜啊... 题目描述 在三维空间中,平面 x = 0, y = 0, z = 0,以及平面 x + y + z = K 围成了一个三棱锥. 整天与整数打交道的小明 ...