有趣的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也是 ...
随机推荐
- SharePoint 2007 制作值班表
背景:公司有了新项目,其中有一块是值班表,简单地说,就是客户需要安排值班,希望把所有的值班安排好,输入到网站中,然后每天发布出来,方便大家看:一开始看到需求,觉得应该用程序去实现,后来想想,其实挺简单 ...
- Mina源码阅读笔记(七)—Mina的拦截器FilterChain
Filter我们很熟悉,在Mina中,filter chain的用法也类似于Servlet的filters,这种拦截器的设计思想能够狠轻松的帮助我们实现对资源的统一处理.我们先大致连接下mina中的f ...
- 用JAVA代码获取Weblogic配置的JNDI 数据源连接
第一步:生成与JDK版本对应的weblogicjar,利用cmd 进入到weblogic_home 路径下进入到server/lib目录,然后运行 JDK 1.6 命令 "java -j ...
- JavaScript设计模式之一封装
对于熟悉C#和Java的兄弟们,面向对象的三大思想(封装,继承,多态)肯定是了解的,今天我想讲讲如何在Javascript中利用封装这个特性,开讲! 我们会把现实中的一些事物抽象成一个Class并且把 ...
- MySQL 库名重命名
MySQL ( RENAME database olddbname TO newdbname ) 对库名的重命名上会出现一些奇怪的错误.有丢失数据的风险. 所以如何去重命名呢: 1 用mysqldu ...
- sql server求分组最大值,最小值,最大值对应时间,和最小值对应时间
先创建数据库 CREATE TABLE [dbo].[Students]( [Id] [int] IDENTITY(1,1) NOT NULL, [age] [int] NULL, [name] [n ...
- JavaScript验证和数据处理的干货(经典)
在开发web项目的时候,难免遇到各种对网页数据的处理,比如对用户在表单中输入的电话号码.邮箱.金额.身份证号.密码长度和复杂程度等等的验证,以及对后台返回数据的格式化比如金额,返回的值为null,还有 ...
- ES入门笔一
ES6一共有6种声明变量的方法 --ES5只有var 和 function --ES6新增了let.const.import和class四种 ES6新增let和const,用来声明变量,是对var的扩 ...
- Tomcat配置多实例:centos和winserver环境
CentOS:配置多Tomcat: 1.下载:# wget http://mirrors.cnnic.cn/apache/tomcat/tomcat-6/v6.0.44/bin/apache- ...
- SSM框架下声明式事务管理(注解配置方式)
一.spring-mybatis.xml文件中加入事务管理配置 <?xml version="1.0" encoding="UTF-8"?> < ...