jQuery toggleCLass()方法用于从选定元素中添加或删除一个或多个类。

  • 如果已经有某个类class则删除，
  • 如果没有则添加某个类class。

通过这种方式，可以实现切换效果。可以通过switch参数指定是添加还是删除。

语法

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

方法参数

参数说明
classname为必填参数。它指定一个或多个要添加或删除的类名。如果您使用多个类，则用空格分隔它们。
function (index, currentclass)这是一个可选参数。它指定要添加或删除的一个或多个类名。index:它提供集合中元素的索引位置。currentclass:提供被选元素的当前类名。
switch也是一个可选参数。它是一个布尔值，指定是应该添加（true）还是删除（false）类。

示例

例1：

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").toggleClass("main");
    });
});
</script>
<style>
.main {
    font-size: 150%;
    color: red;
}
</style>
</head>
<body>
<button> 切换类class</button>
<p> yxjc123.com</p>
<p>jQuery toggleCLass() 方法例子。</p>
<p><b>注:</b> 反复点击按钮查看切换效果。</p>
</body>
</html>
例2： 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>jQuery toggleCLass() 方法</title>
  <style>
  p {
    margin: 4px;
    font-size: 16px;
    font-weight: bolder;
    cursor: pointer;
  }
  .blue {
    color: black;
  }
  .highlight {
    background: pink;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p class="highlight">www.yxjc123.com</p>
<p class="blue">Java 教程</p>
<p class="blue">SQL 教程</p>
<p class="blue">HTML 教程</p>
<script>
$( "p" ).click(function() {
$( this ).toggleClass( "highlight" );
});
</script>
</body>
</html>