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 类网页微信二维码图块滚动效果具体实现
Oct 14 Javascript
js判断上传文件的类型和大小示例代码
Oct 18 Javascript
jquery map方法使用示例
Apr 23 Javascript
有关Promises异步问题详解
Nov 13 Javascript
jQuery实现给input绑定回车事件的方法
Feb 09 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
Oct 25 Javascript
React-intl 实现多语言的示例代码
Nov 03 Javascript
利用babel将es6语法转es5的简单示例
Dec 01 Javascript
对layui初始化列表的CheckBox属性详解
Sep 13 Javascript
layui使用label标签的方法
Sep 14 Javascript
Node.js 中判断一个文件是否存在
Aug 24 Javascript
OpenLayers实现图层切换控件
Sep 25 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
CheckBox 如何实现全选?
2006/06/23 Javascript
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
给文字加上着重号的JS代码
2013/11/12 Javascript
Jquery获得控件值的三种方法总结
2014/02/13 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
2016/02/23 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
Python socket C/S结构的聊天室应用实现
2014/11/30 Python
python通过floor函数舍弃小数位的方法
2015/03/17 Python
十条建议帮你提高Python编程效率
2016/02/16 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
用 python 进行微信好友信息分析
2020/11/28 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
购买美国制造的相框和画框架:Picture Frames
2018/08/14 全球购物
毕业生自我推荐
2013/11/04 职场文书
办护照工作证明范本
2014/01/14 职场文书
物理系毕业生自荐书范文
2014/02/22 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript