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 相关文章推荐
THREE.JS入门教程(3)着色器-下
Jan 24 Javascript
jQuery输入城市查看地图使用介绍
May 08 Javascript
简单的js图片轮换代码(js图片轮播)
May 06 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
Jun 24 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
vue多页面开发和打包正确处理方法
Apr 20 Javascript
如何用webpack4带你实现一个vue的打包的项目
Jun 20 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
Sep 15 Javascript
js实现每日签到功能
Nov 29 Javascript
微信小程序swiper左右扩展各显示一半代码实例
Dec 05 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 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
Zend的AutoLoad机制介绍
2012/09/27 PHP
php获取服务器信息的实现代码
2013/02/04 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
Laravel 实现关系模型取出需要的字段
2019/10/10 PHP
JS 动态加载脚本的4种方法
2009/05/05 Javascript
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
js实现文本框输入文字个数限制代码
2015/12/25 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
JS中promise化微信小程序api
2018/04/12 Javascript
微信小程序实现登录遮罩效果
2018/11/01 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
2020/09/17 Javascript
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
Pycharm如何打断点的方法步骤
2019/06/13 Python
python对常见数据类型的遍历解析
2019/08/27 Python
解决python 上传图片限制格式问题
2019/10/30 Python
Python 如何调试程序崩溃错误
2020/08/03 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
Canvas实现保存图片到本地的示例代码
2018/06/28 HTML / CSS
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
优秀的茶餐厅创业计划书
2014/01/03 职场文书
毕业生自荐书
2014/02/03 职场文书
团日活动总结书格式
2014/05/08 职场文书
公司员工手册范本
2015/05/14 职场文书
国庆节主题班会
2015/08/15 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
解决xampp安装后Apache无法启动
2022/03/21 Servers