切换样式.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 ...
随机推荐
- OpenStack 计算服务 Nova计算节点部署 (九)
如果使用vmware虚拟机进行部署,需要开启虚拟化:如果是服务器需要在bios上开启. Nova Compute nova-compute 一般运行在计算节点上,通过Messages Queue接收并 ...
- ubuntu下做柯老师lab19-lab20实验问题总结
前两篇文章告诉了大家如何将无线封包传输遗失模型和myevalvid添加到ns2.35中,已经成功验证了,这个没有问题.但是本人在做lab19和lab20实验时又发现了一些关于myevalvid工具集的 ...
- Java 获取JVM内存和物理内存信息
package com.sysinfo; public class MonitorInfo { /** jvm可使用内存. */ private long totalMemory; /** jvm剩余 ...
- HDU 6035 Colorful Tree (树形DP)
[题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=6035 [题目大意] 给出一颗树,一条路径的价值为其上点权的种类数,求路径总价值 [题解] 我们计算 ...
- CodeForces 380C Sereja and Brackets(扫描线+树状数组)
[题目链接] http://codeforces.com/problemset/problem/380/C [题目大意] 给出一个括号序列,求区间内左右括号匹配的个数. [题解] 我们发现对于每个右括 ...
- Problem G: 零起点学算法102——删除字符
#include<stdio.h> #include<string.h> int main() { ],a; while(gets(ch)!=NULL) { scanf(&qu ...
- BZOJ 4029: [HEOI2015]定价 贪心
4029: [HEOI2015]定价 题目连接: http://www.lydsy.com/JudgeOnline/problem.php?id=4029 Description 在市场上有很多商品的 ...
- (Mark)操作系统原理
Q:什么是中断?A:中断嘛,举个容易理解的例子吧. 比如莲莲和唐唐在下象棋,眼看莲莲就快招架不住了,正当此紧要关头,唐唐的女友来了,非要唐唐陪她上街买衣服不可(唐唐晕倒:-) ),于是唐唐不得不同 ...
- 在iOS项目中使用截图
最近项目中要求将个人的信息生成一张图片,以名片的方式分享出去.由此就需要使用截图功能.需求如图: 代码如下:
- ConCurrent并发包 - Lock详解(转)
synchronized的缺陷 我们知道,可以利用synchronized关键字来实现共享资源的互斥访问.Java 5在java.util.concurrent.locks包下提供了另一种来实现线 ...