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 相关文章推荐
如何实现浏览器上的右键菜单
Jul 10 Javascript
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 Javascript
javascript prototype 原型链
Mar 12 Javascript
javascript 选择文件夹对话框(web)
Jul 07 Javascript
Javascript 面向对象之重载
May 04 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
Oct 16 Javascript
javascript的document.referrer浏览器支持、失效情况总结
Jul 18 Javascript
JQuery实现图片轮播效果
Sep 15 Javascript
JS碰撞运动实现方法详解
Dec 15 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
深入理解js 中async 函数的含义和用法
May 13 Javascript
Element Card 卡片的具体使用
Jul 26 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
逆序二维数组插入一元素的php代码
2012/06/08 PHP
PHP把网页保存为word文件的三种方法
2014/04/01 PHP
PHP中COOKIES使用示例
2015/07/26 PHP
用javascript自动显示最后更新时间
2007/03/15 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
layui使用数据表格实现购物车功能
2019/07/26 Javascript
JS判断浏览器类型与操作系统的方法分析
2020/04/30 Javascript
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
深入理解Python中的内置常量
2017/05/20 Python
Python错误处理操作示例
2018/07/18 Python
Python异常处理知识点总结
2019/02/18 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
Django模板语言 Tags使用详解
2019/09/09 Python
基于python3抓取pinpoint应用信息入库
2020/01/08 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
Django 解决由save方法引发的错误
2020/05/21 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
浅析几个CSS3常用功能的写法
2014/06/05 HTML / CSS
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
"引用"与指针的区别是什么
2016/09/07 面试题
CSMA/CD介质访问控制协议
2015/11/17 面试题
大专计算机个人求职的自我评价
2013/10/21 职场文书
初中政治教学反思
2014/01/17 职场文书
建筑安全生产目标责任书
2014/07/23 职场文书
卫校毕业生自我鉴定
2014/09/28 职场文书
专项资金申请报告
2015/05/15 职场文书
MySQL子查询中order by不生效问题的解决方法
2021/08/02 MySQL
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python
Windows server 2012搭建FTP服务器
2022/04/29 Servers