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 相关文章推荐
setTimeout 不断吐食CPU的问题分析
Apr 01 Javascript
js更优雅的兼容
Aug 12 Javascript
Ionic快速安装教程
Jun 03 Javascript
js实现页面刷新滚动条位置不变
Nov 27 Javascript
JS实现仿PS的调色板效果完整实例
Dec 21 Javascript
基于jQuery实现选项卡效果
Jan 04 Javascript
详解Vue中状态管理Vuex
May 11 Javascript
详解JavaScript中的函数、对象
Apr 01 Javascript
微信小程序 调用微信授权窗口相关问题解决
Jul 25 Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
Apr 08 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
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
可定制的PHP缩略图生成程式(需要GD库支持)
2007/03/06 PHP
php 获取select下拉列表框的值
2010/05/08 PHP
PHP应用JSON技巧讲解
2013/02/03 PHP
PHP 自定义错误处理函数trigger_error()
2013/03/26 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
php微信公众号js-sdk开发应用
2016/11/28 PHP
详谈PHP面向对象中常用的关键字和魔术方法
2017/02/04 PHP
jquery提交form表单时禁止重复提交的方法
2014/02/13 Javascript
javascript闭包入门示例
2014/04/30 Javascript
jQuery实现列表的全选功能
2015/03/18 Javascript
js实现的牛顿摆效果
2015/03/31 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
2015/12/30 Javascript
AngularJS中isolate scope的用法分析
2016/11/22 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
[46:44]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第二场 3月7日
2021/03/11 DOTA
python创建线程示例
2014/05/06 Python
Python中的二叉树查找算法模块使用指南
2014/07/04 Python
Python的条件语句与运算符优先级详解
2015/10/13 Python
Python实现Smtplib发送带有各种附件的邮件实例
2017/06/05 Python
python3实现跳一跳点击跳跃
2018/01/08 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
Django在admin后台集成TinyMCE富文本编辑器的例子
2019/08/09 Python
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
Python日志syslog使用原理详解
2020/02/18 Python
英国度假别墅预订:Sykes Cottages
2017/06/12 全球购物
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
2014年庆元旦活动方案
2014/02/15 职场文书
小学二年级评语
2014/04/21 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python
详解用Python把PDF转为Word方法总结
2021/04/27 Python