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/Css 文件的代码
Jul 03 Javascript
JQueryEasyUI datagrid框架的基本使用
Apr 08 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 Javascript
javascript 小数乘法结果错误的处理方法
Jul 28 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 Javascript
从零学习node.js之express入门(六)
Feb 25 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 Javascript
微信小程序wx.request实现后台数据交互功能分析
Nov 25 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 Javascript
JavaScript实现图片轮播特效
Oct 23 Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 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
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
PHP实现的DES加密解密实例代码
2016/04/06 PHP
Javascript 面试题随笔
2011/03/31 Javascript
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
Jquery获取复选框被选中值的简单方法
2013/07/04 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
2016/03/01 Javascript
BootStrap Typeahead自动补全插件实例代码
2016/08/10 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
JS实现仿百度文库评分功能
2017/01/12 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
深入理解js 中async 函数的含义和用法
2018/05/13 Javascript
在vue项目中优雅的使用SVG的方法实例详解
2018/12/03 Javascript
JS数组splice操作实例分析
2019/10/12 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
vuex存储token示例
2019/11/11 Javascript
vue 授权获取微信openId操作
2020/11/13 Javascript
[50:04]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第二局
2016/02/28 DOTA
使用Python压缩和解压缩zip文件的教程
2015/05/06 Python
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
python之拟合的实现
2019/07/19 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
python中实现词云图的示例
2020/12/19 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
三星新西兰官网:Samsung新西兰
2019/03/05 全球购物
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
党员年终民主评议的自我评价
2013/11/05 职场文书
董事长秘书岗位职责
2013/11/29 职场文书
119消防日活动总结
2014/08/29 职场文书
中学生自我评价范文
2015/03/03 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书