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 相关文章推荐
javascript一些不错的函数脚本代码
Sep 10 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
Jul 04 Javascript
JQuery控制radio选中和不选中方法总结
Apr 15 Javascript
jQuery zclip插件实现跨浏览器复制功能
Nov 02 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
Dec 17 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
Aug 08 Javascript
JS实现浏览器打印、打印预览示例
Feb 28 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
React 父子组件通信的实现方法
Dec 05 Javascript
vue移动端使用canvas签名的实现
Jan 15 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 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中的超全局变量
2006/10/09 PHP
半角全角相互转换的js函数
2009/10/16 Javascript
jquery 学习之二 属性(类)
2010/11/25 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
2011/12/26 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
2017/04/13 Javascript
JS实现json的序列化和反序列化功能示例
2017/06/13 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
nodejs检测因特网是否断开的解决方案
2019/04/17 NodeJs
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
python静态方法实例
2015/01/14 Python
Python中实现结构相似的函数调用方法
2015/03/10 Python
Python数据结构与算法之列表(链表,linked list)简单实现
2017/10/30 Python
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
python常量折叠基础知识点讲解
2021/02/28 Python
农林环境专业求职信
2014/03/13 职场文书
大学生社会实践自我鉴定
2014/03/24 职场文书
房地产公司见习自我鉴定
2014/04/28 职场文书
广播体操比赛口号
2014/06/10 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
团日活动总结格式
2015/05/11 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
队名及霸气口号大全
2015/12/25 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书
奖学金申请书(范文)
2019/08/14 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书
深入探讨opencv图像矫正算法实战
2021/05/21 Python