当前位置: 首页 > 编程笔记 >

jQuery使用toggleClass方法动态添加删除Class样式的方法

林国安
2023-03-14
本文向大家介绍jQuery使用toggleClass方法动态添加删除Class样式的方法,包括了jQuery使用toggleClass方法动态添加删除Class样式的方法的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了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程序设计有所帮助。

 类似资料:
  • 本文向大家介绍JQuery实现动态添加删除评论的方法,包括了JQuery实现动态添加删除评论的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JQuery实现动态添加删除评论的方法。分享给大家供大家参考。具体实现方法如下: 希望本文所述对大家的jQuery程序设计有所帮助。

  • 本文向大家介绍JQuery动态添加和删除表格行的方法,包括了JQuery动态添加和删除表格行的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JQuery动态添加和删除表格行的方法。分享给大家供大家参考。具体分析如下: 昨天做页面表格行动态添加和删除,看了无数的介绍,发现了一个好东东,JQuery。用它实现起来还真的是很方便,这个是我用到我们平台的一个方法。 后台使用的也是比较容易的,

  • 本文向大家介绍js实现class样式的修改、添加及删除的方法,包括了js实现class样式的修改、添加及删除的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现class样式的修改、添加及删除的方法。分享给大家供大家参考。具体分析如下: 比较常见的js前端功能,通过修改标签的className实现相应的功能。 具体代码如下: 希望本文所述对大家的javascript程序设计有所帮

  • 本文向大家介绍jQuery使用addClass()方法给元素添加多个class样式,包括了jQuery使用addClass()方法给元素添加多个class样式的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery使用addClass()方法给元素添加多个class样式的方法。分享给大家供大家参考。具体如下: jQuery通过addClass()方法给元素添加多个class,只需要在添

  • 本文向大家介绍jQuery实现鼠标划过添加和删除class的方法,包括了jQuery实现鼠标划过添加和删除class的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现鼠标划过添加和删除class的方法。分享给大家供大家参考。具体实现方法如下: 希望本文所述对大家的jQuery程序设计有所帮助。

  • 本文向大家介绍javascript动态添加删除tabs标签的方法,包括了javascript动态添加删除tabs标签的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了javascript动态添加删除tabs标签的方法。分享给大家供大家参考。具体实现方法如下: 用到的图片title2_on_green.jpg <img alt="" src="http://p.blog.csdn.net