迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 >

在 jQuery 中切换类

作者:迹忆客 最近更新:2023/03/13 浏览次数:

今天的文章将介绍 jQuery 中的 toggle 类。

在 jQuery 中切换类

jQuery 提供了一个内置的类 toggle 方法。此事件根据类的存在或状态参数的值,从匹配元素集中的每个元素中添加或删除一个或多个类。

语法:

.toggleClass( className )
.toggleClass( classNames )

toggle 方法将一个或多个类作为参数。如果匹配元素集中的元素已经具有第一个版本中的类,则将其删除。

如果一个元素没有类,它将被添加。例如,我们可以将 .toggleClass() 应用于简单的 <div>

.toggleClass() 的第二个模型使用第二个参数来确定是否添加或消除类。如果此参数的值为 true,则添加该类;如果 false,则该类被淘汰。

如果没有超过 .toggleClass() 的参数,则在第一次调用 .toggleClass() 时切换元素的所有类。

让我们通过以下示例来理解它。

<p class="blue">Click on me to change color</p>
.blue {
    color: blue;
  }
.highlight {
    background: yellow;
}
$( "p" ).click(function() {
  $( this ).toggleClass( "highlight" );
});

上面的例子定义了一个带有 blue 类的段落标签。一旦用户点击了段落,它将应用 .toggleClass("highlight") 到该段落。

在任何支持 jQuery 的浏览器中运行上述代码;它将在下面显示结果。

输出:

切换之前:

在切换类之前

切换后:

在切换类之后

上一篇:jQuery 修剪

下一篇:jQuery 本地存储

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便