有趣的toggleClass实现交替样式
addClass和removeClass进行样式类型的修改相信比较容易学习和接受
但是用这两个方法去实现交替样式,像一些<li>列表的样式,还有同类型数据的呈现,
当然很多框架都给出了封装好的方法去实现,但是js本身就提供了一个很好用的函数来实现这一哦应用场景
例如这样的:

我们用toggleClass(切换类):如果有这个class就删除,没有就添加,
首先定义一个class样式,然后进行移除、添加、移除的切换,就实现了这样的效果。easy吧!
有趣的toggleClass实现交替样式的更多相关文章
- angular 中同级元素交替样式
事件 : ng-click="addNews()" 所属div的层级: div > div >span 即,对于 event.target 查找的话最多 从s ...
- jquery动态样式操作
获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class,JQuery代码如下: 1 var p_class = $(" ...
- Jquery添加移除样式
获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class,JQuery代码如下: var p_class = $("p ...
- jquery 如何动态添加、删除class样式方法介绍
获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class 取与设置样式 获取class和设置class都可以使用attr()方法 ...
- jquery 如何动态添加、删除class样式方法介绍_jquery_脚本之家
获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class 取与设置样式 获取class和设置class都可以使用attr()方法 ...
- jQuery知识点一 each()和toggleClass()
jQuery的一些东东比较容易忘,所以在这里整理一下... ... 1. each (1) $(selector).each(function(index,element)) inde ...
- JQuery_元素样式操作
元素样式操作包括了直接设置CSS 样式.增加CSS 类别.类别切换.删除类别这几种操作方法.而在整个jQuery 使用频率上来看,CSS 样式的操作也是极高的,所以需要重点掌握. 一.css()方法 ...
- addClass() 和 toggleClass()
addClass()是在原有的类基础上增加类属性,仍然保留原有的类的样式.语法格式为:addClass(class0 class1 ...) ,例如: $("p").addClas ...
- JQuery操作属性、样式、风格(attr、class、css)
样式操作 <p class="myclass" title="选择喜欢的水果">你最喜欢的水果是?</p> 在上面代码中,class也是 ...
随机推荐
- Linux文件系统及常用命令
Linux文件系统介绍: 一 .Linux文件结构 文件结构是文件存放在磁盘等存贮设备上的组织方法.主要体现在对文件和目录的组织上.目录提供了管理文件的一个方便而有效的途径. Linux使用树状目录结 ...
- 负载均衡之让nginx跑起来
一个简单的原因,我不得不考虑负载 小源做了个网站,很简单,传统的java开放框架,和一个tomcat搞定,让人没想到的是网站既然火起来了,很快一个tomcat就搞不定了,怎么办? 网站访问量很大,既然 ...
- Integer 和int 比较
在jdk1.5的环境下,有如下4条语句: 1 2 3 4 Integer i01 = 59; int i02 = 59; Integer i03 =Integer.valueOf(59); Integ ...
- 发布开源库到JCenter所遇到的一些问题记录
这周末自己瞎折磨了下,如何发布开源库到 JCenter,然后这过程中碰到了一些问题,在此记录分享一下 本篇是基于上一篇:教你一步步发布一个开源库到 JCenter 介绍的流程.步骤中所遇到的问题,所以 ...
- CSS布局之--各种居中
居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...
- Windows 10创意者更新ISO发布!官方下载
http://news.mydrivers.com/1/526/526719.htm 去年7月份,微软面向Windows 10推出了“周年更新”,让系统变得更加稳定好用.今天,Windows 10迎来 ...
- Java开源生鲜电商平台-系统架构与技术选型(源码可下载)
Java开源生鲜电商平台-系统架构与技术选型(源码可下载) 1. 硬件环境 公司服务器 2. 软件环境 2.1 操作系统 Linux CentOS 6.8系列 2.2 反向代理/web服务器 ...
- java反射机制,以及对反射机制的了解,如有差池欢迎点评(初学者勿喷)
本人学习java时间不长,但是对java很感兴趣,知道有博客园这个平台果断的注册,记录我的java成长日记,这也是我的处女作,虽然很菜但是还是希望大家能见证我的成长,觉得可以的可以和我讨论一起学习 在 ...
- php进阶篇
字符串调用: $name = 'eco'; echo $name; //eco //双引号会解析变量 echo "$name"; //eco //单引号不会解析变量 echo '$ ...
- python数据存储技巧
1.文本存储 比如我们现在有10篇文章,每篇文章由三部分组成,题目,作者,内容(title,author,content),然后要求这三个部分明确展示出来,并且每篇文章之间用=====分割. 大致思路 ...