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 ajax提交表单数据的两种方式
Nov 24 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
JS实现可调整倒计时间代码分享
Aug 18 Javascript
跟我学习javascript的作用域与作用域链
Nov 19 Javascript
基于jquery实现简单的手风琴特效
Nov 24 Javascript
7个去伪存真的JavaScript面试题
Jan 07 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
js轮播图之旋转木马效果
Oct 13 Javascript
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
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
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
PHP 反向排序和随机排序代码
2010/06/30 PHP
php debug 安装技巧
2011/04/30 PHP
PHP遍历数组的方法汇总
2015/04/30 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
php获取微信openid方法总结
2019/10/10 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
javascript简单实现命名空间效果
2014/03/06 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
2015/02/02 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
2015/11/02 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
JS浮点数运算结果不精确的Bug解决
2019/08/01 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
Python中操作MySQL入门实例
2015/02/08 Python
Python中List.index()方法的使用教程
2015/05/20 Python
利用python实现微信头像加红色数字功能
2018/03/26 Python
Django中的文件的上传的几种方式
2018/07/23 Python
Python发展史及网络爬虫
2019/06/19 Python
python3实现高效的端口扫描
2019/08/31 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
Python内置函数及功能简介汇总
2020/10/13 Python
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
世界上最大的二手相机店:KEN
2017/05/17 全球购物
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
促销活动总结
2014/04/28 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
鲁迅故居导游词
2015/02/05 职场文书
python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)
2022/04/06 Python