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>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    例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>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32