jQuery toggleClass() 方法

定义和用法

toggleClass() 方法对添加和移除被选元素的一个或多个类进行切换。

该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。

然而，通过使用 "switch" 参数，您能够规定只删除或只添加类。

语法

$(selector).toggleClass(classname,function(index,currentclass),switch)

参数描述

参数	描述
classname	必需。规定添加或移除的一个或多个类名。如需规定若干个类，请使用空格分隔类名。
function(index,currentclass)	可选。规定返回需要添加/删除的一个或多个类名的函数。 index - 返回集合中元素的 index 位置。 currentclass - 返回被选元素的当前类名。
switch	可选。布尔值，规定是否仅仅添加（true）或移除（false）类。

实例

下例演示了所选元素添加/删除类之间切换：

<!DOCTYPE html>
   <html lang="en">
   <head>
   <meta charset="UTF-8">
   <title>欢迎来到蝴蝶教程</title>
   //此版本是百度cdn 1.11.1，当然你可以使用更高的版本，从2.0版本以上的是不支持ie6-8的
   <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
   <script>
       $(document).ready(function () {
         $("button").click(function(){
            $("h1,h2,p").toggleClass("blue");
          });
       });
   </script>
   </head>
   <body>
       <h1 class="blue">这是一个h1段落。</p>
       <h2 class="blue">这是h2一个段落。</p>
       <p class="blue">这个是p段落</p>
       <button>点击切换blue类</button>
      
   </body>
   </html>

尝试一下

jQuery toggleClass() 方法

定义和用法

语法

参数描述

实例

相关页面