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 常用代码技巧大收集
Feb 25 Javascript
JavaScript this调用规则说明
Mar 08 Javascript
基于jquery的15款幻灯片插件
Apr 10 Javascript
js调用图片隐藏&amp;显示实现代码
Sep 13 Javascript
禁止拷贝网页内容的js代码
Jan 22 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 Javascript
详解在React中跨组件分发状态的三种方法
Aug 09 Javascript
原生JS实现$.param() 函数的方法
Aug 10 Javascript
JavaScript中创建原子的方法总结
Aug 26 Javascript
JS中数据结构之栈
Jan 01 Javascript
ES5新增数组的实现方法
May 12 Javascript
ES6对象操作实例详解
May 23 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中的关联模型注意点
2014/06/16 PHP
Linux系统下PHP-FPM的安装和配置教程
2015/08/17 PHP
php格式化时间戳
2016/12/17 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
2011/07/31 Javascript
javascript将url中的参数加密解密代码
2014/11/17 Javascript
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
原生js实现autocomplete插件
2016/04/14 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
bootstrap日期插件daterangepicker使用详解
2017/10/19 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
2020/08/06 Javascript
python基础教程之popen函数操作其它程序的输入和输出示例
2014/02/10 Python
python 循环遍历字典元素的简单方法
2016/09/11 Python
教你使用python实现微信每天给女朋友说晚安
2018/03/23 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
python列表推导和生成器表达式知识点总结
2020/01/10 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
英语专业学子个人的自我评价
2013/10/02 职场文书
《藤野先生》教学反思
2014/02/19 职场文书
建议书的格式
2014/05/12 职场文书
十佳青年事迹材料
2014/08/21 职场文书
大学本科生职业生涯规划书范文
2014/09/14 职场文书
付款证明格式范文
2015/06/19 职场文书
青年志愿者活动感想
2015/08/07 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书
Python趣味挑战之给幼儿园弟弟生成1000道算术题
2021/05/28 Python
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers