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 相关文章推荐
JScript内置对象Array中元素的删除方法
Mar 08 Javascript
在js文件中写el表达式取不到值的原因及解决方法
Dec 23 Javascript
javascript连续赋值问题
Jul 08 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
Aug 13 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 Javascript
深入理解js数组的sort排序
May 28 Javascript
原生JavaScript制作计算器
Oct 16 Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 Javascript
Bootstrap Table使用整理(一)
Jun 09 Javascript
bootstrap Table插件使用demo
Aug 07 Javascript
对于防止按钮重复点击的尝试详解
Apr 22 Javascript
详解Angular Karma测试的持续集成实践
Nov 15 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中将网页导出为Word文档的代码
2012/05/25 PHP
基于PHP5魔术常量与魔术方法的详解
2013/06/13 PHP
PHP Hash算法:Times33算法代码实例
2015/05/13 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
jQuery 源码分析笔记(6) jQuery.data
2011/06/08 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
2013/09/13 Javascript
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
node.js中的fs.readFileSync方法使用说明
2014/12/15 Javascript
JavaScript常用函数工具集:lao-utils
2016/03/01 Javascript
分享jQuery网页元素拖拽插件
2020/12/01 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
vue2.0全局组件之pdf详解
2017/06/26 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
2019/10/26 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
2020/08/14 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
[48:24]完美世界DOTA2联赛循环赛LBZS vs Forest 第一场 10月30日
2020/10/31 DOTA
Python读写Json涉及到中文的处理方法
2016/09/12 Python
Python获取SQLite查询结果表列名的方法
2017/06/21 Python
Python学习入门之区块链详解
2017/07/25 Python
python+matplotlib绘制3D条形图实例代码
2018/01/17 Python
python实现月食效果实例代码
2019/06/18 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
使用CSS3在触屏上为按钮实现激活效果
2013/09/27 HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
阿里健康大药房:阿里自营网上药店
2017/08/01 全球购物
意大利制造的男鞋和女鞋:SCAROSSO
2018/03/07 全球购物
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
普通话宣传标语
2014/06/26 职场文书
2015自愿离婚协议书范本
2015/01/28 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书