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 相关文章推荐
JQuery 解析多维的Json数据格式
Nov 02 Javascript
javascript 学习笔记(onchange等)
Nov 14 Javascript
jquery处理页面弹出层查询数据等待操作实例
Mar 25 Javascript
理解和运用JavaScript的闭包机制
Aug 13 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 Javascript
bootstrap按钮插件(Button)使用方法解析
Jan 13 Javascript
Bootstrap框架安装使用详解
Jan 21 Javascript
vue axios 在页面切换时中断请求方法 ajax
Mar 05 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
深入理解JavaScript 箭头函数
May 30 Javascript
vue如何清除浏览器历史栈
May 25 Vue.js
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
apache+php+mysql安装配置方法小结
2010/08/01 PHP
php数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
php中stream(流)的用法
2014/03/25 PHP
php实现根据字符串生成对应数组的方法
2014/09/22 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
2017/05/23 PHP
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
iview table render集成switch开关的实例
2018/03/14 Javascript
vue结合Echarts实现点击高亮效果的示例
2018/03/17 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
[00:39]DOTA2上海特级锦标赛 Liquid战队宣传片
2016/03/04 DOTA
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
描述内存分配方式以及它们的区别
2016/10/15 面试题
毕业生教师求职信
2013/10/20 职场文书
大学生自我鉴定
2013/12/16 职场文书
咖啡书吧创业计划书
2014/01/13 职场文书
大学生党员自我批评
2014/02/14 职场文书
汽车维修专业自荐书
2014/05/26 职场文书
建筑院校毕业生求职信
2014/06/13 职场文书
三八节标语
2014/06/27 职场文书
公司户外活动总结
2014/07/04 职场文书
房产授权委托书范本
2014/09/22 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
继承权公证书范本
2015/01/23 职场文书
这样写python注释让代码更加的优雅
2021/06/02 Python
Python 中random 库的详细使用
2021/06/03 Python
解决SpringBoot跨域的三种方式
2021/06/26 Java/Android
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫