jQuery toggleClass()(1)

📌 相关文章

📜 jQuery toggleClass()(1)

📅 最后修改于: 2023-12-03 15:16:44.272000 🧑 作者: Mango

jQuery toggleClass()

简介

toggleClass()是jQuery中的一个方法，用于在两个或多个类之间切换元素的类。它可以添加一个类，删除一个类，或者在类之间切换。

格式

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

selector：要切换类的元素。
classname：切换的类名称。可以是多个用空格隔开的类名。
function(index,currentclass) (可选参数)：指定切换类的方式，可以使用一个函数来返回添加或删除的类名。

实例

例子1：添加或删除类

以下代码将在单击按钮时添加或删除.active类：

<!DOCTYPE html>
<html>
   <head>
     <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
     <script>
       $(document).ready(function(){
         $("button").click(function(){
           $("p").toggleClass("active");
         });
       });
     </script>
     <style>
       .active {
         font-weight: bold;
         color: red;
       }
     </style>
   </head>
   <body>
     <button>Toggle class</button>
     <p>This is some text</p>
   </body>
</html>

例子2：自定义切换方式

以下代码将在单击按钮时使用一个函数来切换元素的类，函数会返回一个要添加或删除的类：

<!DOCTYPE html>
<html>
   <head>
     <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
     <script>
       $(document).ready(function(){
         $("button").click(function(){
           $("p").toggleClass(function(){
             return "active highlight";
           });
         });
       });
     </script>
     <style>
       .active {
         font-weight: bold;
         color: red;
       }
       .highlight {
         background-color: yellow;
       }
     </style>
   </head>
   <body>
     <button>Toggle class</button>
     <p>This is some text</p>
   </body>
</html>

总结

toggleClass()方法可以方便地切换元素的类，并且可以根据需要自定义切换方式。它是jQuery中的一个非常有用的方法，可以帮助我们快速轻松地修改元素的样式。