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调用Session的实现代码
Oct 29 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
Jun 14 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
Dec 09 Javascript
jQuery Mobile 和 Kendo UI 的比较
May 05 Javascript
基于Vue.js的表格分页组件
May 22 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
VUE页面中加载外部HTML的示例代码
Sep 20 Javascript
react build 后打包发布总结
Aug 24 Javascript
JavaScript实现H5接金币功能(实例代码)
Feb 22 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
VOLVO车载收音机
2021/03/02 无线电
php curl的深入解析
2013/06/02 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
Linux安装配置php环境的方法
2016/01/14 PHP
基于命令行执行带参数的php脚本并取得参数的方法
2016/01/25 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
js 对象是否存在判断
2009/07/15 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
jQuery同步提交示例代码
2015/12/12 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
node.js连接MongoDB数据库的2种方法教程
2017/05/17 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
vue和iview实现Scroll 数据无限滚动功能
2019/10/31 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
[39:07]LGD vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
基于django传递数据到后端的例子
2019/08/16 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
python如何设置静态变量
2020/09/07 Python
英国巧克力贸易公司:Chocolate Trading Company
2017/03/21 全球购物
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
先进德育工作者事迹材料
2014/01/24 职场文书
高中体育教学反思
2014/01/24 职场文书
本科应届生求职信
2014/08/05 职场文书
《司马光》教学反思
2016/02/22 职场文书
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python