jQuery使用toggleClass方法动态添加删除Class样式的方法


Posted in Javascript onMarch 26, 2015

本文实例讲述了jQuery使用toggleClass方法动态添加删除Class样式的方法。分享给大家供大家参考。具体分析如下:

jQuery通过toggleClass方法动态添加删除Class,一次执行相当于addClass,再次执行相当于removeClass,运行下面的代码点击按钮可以看到文本段落字体在蓝色和黑色间切换

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
 });
});
</script>
<style type="text/css">
.blue
{
color:blue;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Toggle class</button>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript之HTMLCollection接口代码
Apr 27 Javascript
js判断当前页面用什么浏览器打开的方法
Jan 06 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
May 09 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
angular $watch 一个变量的变化(实例讲解)
Aug 02 Javascript
详解Web使用webpack构建前端项目
Sep 23 Javascript
小程序实现日历左右滑动效果
Oct 21 Javascript
微信小程序缓存支持二次开发封装实现解析
Dec 16 Javascript
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
在HTML5 localStorage中存储对象的示例代码
Apr 21 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 #Javascript
12306验证码破解思路分享
Mar 25 #Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
Mar 25 #Javascript
jQuery获得document和window对象宽度和高度的方法
Mar 25 #Javascript
jQuery设置指定网页元素宽度和高度的方法
Mar 25 #Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
Mar 25 #Javascript
Jquery实现鼠标移动放大图片功能实例
Mar 25 #Javascript
You might like
orm获取关联表里的属性值
2016/04/17 PHP
php获取远程图片并下载保存到本地的方法分析
2016/10/08 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
php给数组赋值的实例方法
2019/09/26 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
解决jquery的.animate()函数在IE6下的问题
2010/12/03 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
详解参数传递四种形式
2015/07/21 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
require.js 加载过程与使用方法介绍
2018/10/30 Javascript
Windows下Node爬虫神器Puppeteer安装记
2019/01/09 Javascript
微信小程序实现类似微信点击语音播放效果
2020/03/30 Javascript
JavaScript交换变量的常用方法小结【4种方法】
2020/05/07 Javascript
[26:50]2018完美盛典DOTA2表演赛
2018/12/17 DOTA
Python性能优化技巧
2015/03/09 Python
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
Python3实现对列表按元组指定列进行排序的方法分析
2018/12/22 Python
Python如何处理大数据?3个技巧效率提升攻略(推荐)
2019/04/15 Python
python中web框架的自定义创建
2019/09/08 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
SEPHORA新西兰官方网站:购买化妆品和护肤品
2016/12/02 全球购物
优质有机椰子产品:Dr. Goerg
2019/09/24 全球购物
统计每一学生的平均成绩
2014/06/06 面试题
班组长的岗位职责
2013/12/09 职场文书
我为自己代言广告词
2014/03/18 职场文书
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python
MySQL读取JSON转换的方式
2022/03/18 MySQL
Python学习之os包使用教程详解
2022/03/21 Python