jQuery toggleClass() 方法

实例

在添加和删除所有 <p> 元素的 "main" 类名之间切换:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  5. <script>
  6. $(document).ready(function(){
  7. $("button").click(function(){
  8. $("p").toggleClass("main");
  9. });
  10. });
  11. </script>
  12. <style>
  13. .main {
  14. font-size: 120%;
  15. color: red;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <button>切换 p 元素的 "main" 类</button>
  21. <p>这是一个段落</p>
  22. <p>这是另一个段落</p>
  23. <p><b>注意:</b> 多次单击该按钮可查看切换效果</p>
  24. </body>
  25. </html>

定义与用法

toggleClass() 方法在添加和删除选定元素中的一个或多个样式类名之间切换。

此方法检查每个元素的指定样式类名。如果缺少类名,则添加类名,如果已经设置,则删除类名——这会产生切换效果。

但是,通过使用 "switch" 参数,可以指定仅删除或仅添加类名。


语法

  1. $(selector).toggleClass(classname,function(index,currentclass),switch)
参数描述
classname必填。指定要添加或删除的一个或多个样式类名。要指定多个类,请用空格分隔类名
function(index,currentclass)可选。指定返回一个或多个要添加/删除的类名的函数
  • index - 返回元素在集合中的索引位置
  • currentclass - 返回选定元素的当前类名
switch可选。一个布尔值,指定是添加类(true),还是删除类(false)

更多实例

如何使用 toggleClass() 方法在添加和删除类名之间切换

使用函数指定应为选定元素切换哪些类名

如何使用 switch 参数仅添加或删除类名

分类导航