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 CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 Javascript
js取消单选按钮选中示例代码
Nov 14 Javascript
javascript实现des解密加密全过程
Apr 03 Javascript
js创建对象的区别示例介绍
Jul 24 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
May 09 Javascript
详解JS中的柯里化(currying)
Aug 17 Javascript
使用JavaScript实现点击循环切换图片效果
Sep 03 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
vue实现轮播图帧率播放
Jan 26 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
在JavaScript中调用php程序
2009/03/09 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
PHP程序员简单的开展服务治理架构操作详解(二)
2020/05/14 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
js调试系列 初识控制台
2014/06/18 Javascript
javascript制作网页图片上实现下雨效果
2015/02/26 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
2016/06/09 Javascript
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
AngularJs 动态加载模块和依赖
2016/09/15 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
2016/10/10 Javascript
vue-resource 拦截器使用详解
2017/02/21 Javascript
微信小程序云开发之使用云存储
2019/05/17 Javascript
layui radio单选限制下一个radio单选的实例
2019/09/03 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
使用Python实现一个简单的项目监控
2015/03/31 Python
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
Python使用turtule画五角星的方法
2015/07/09 Python
使用Python的Twisted框架编写非阻塞程序的代码示例
2016/05/25 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
利用python修改json文件的value方法
2018/12/31 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
白色公司:The White Company
2017/10/11 全球购物
学习雷锋做美德少年寄语大全
2014/04/09 职场文书
企业标语大全
2014/07/01 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
“学党章、守党纪、讲党规”学习心得体会
2016/01/14 职场文书
python编写五子棋游戏
2021/05/25 Python
JavaScript实现队列结构过程
2021/12/06 Javascript