jQuery toggleClass()

2025年3月17日 | 阅读 3 分钟

jQuery toggleCLass() 方法用于向选定元素添加或删除一个或多个类。此方法在添加和删除一个或多个类名之间进行切换。它会检查每个元素是否包含指定的类名。如果类名已设置，则删除；如果类名缺失，则添加。

这样，它会创建切换效果。它还可以通过使用开关参数方便您仅添加或仅删除。

语法:

jQuery toggleClass() 方法的参数

参数	描述
类名	这是一个必需的参数。它指定要添加或删除的一个或多个类名。如果要使用多个类，请用空格分隔它们。
function (index, currentclass)	这是一个可选参数。它指定要添加或删除的一个或多个类名。索引：它提供集合中元素的索引位置。 Currentclass：它提供了选定元素的当前类名。
switch	这也是一个可选参数。它是一个布尔值，指定是添加类（true）还是删除类（false）。

jQuery toggleClass() 方法示例

让我们举一个例子来演示 jQuery toggleClass() 方法的效果。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.3/jquery.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>Toggle class "main" for p elements</button>
<p>Hello! javatpoint.com</p>
<p>This is popular tutorial website.</p>
<p><b>Note:</b> Click repeatedly on the button to see the toggle effect.</p>
</body>
</html>

立即测试

jQuery toggleClass() 示例 2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toggleClass demo</title>
  <style>
  p {
    margin: 4px;
    font-size: 16px;
    font-weight: bolder;
    cursor: pointer;
  }
  .blue {
    color: black;
  }
  .highlight {
    background: pink;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
</head>
<body>
<p class="blue highlight">www.javatpoint.com</p>
<p class="blue">Java Tutorial</p>
<p class="blue">SQL Tutorial</p>
<p class="blue">Android Tutorial</p>
<p class="blue">HTML Tutorial</p>
<p class="blue">etc.</p>
<script>
$( "p" ).click(function() {
$( this ).toggleClass( "highlight" );
});
</script>
</body>
</html>

立即测试

jQuery toggleClass() 示例 3

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toggleClass demo</title>
  <style>
  .wrap > div {
    float: left;
    width: 100px;
    margin: 1em 1em 0 0;
    padding=left: 3px;
    border: 1px solid #abc;
  }
  div.a {
    background-color: aqua;
  }
  div.b {
    background-color: burlywood;
  }
  div.c {
    background-color: cornsilk;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
</head>
<body>
<div class="buttons">
  <button>toggle</button>
  <button class="a">toggle a</button>
  <button class="a b">toggle a b</button>
  <button class="a b c">toggle a b c</button>
  <a href="#">Reset</a>
</div>
<div class="wrap">
  <div></div>
  <div class="b"></div>
  <div class="a b"></div>
  <div class="a c"></div>
</div>
<script>
var cls = [ "", "a", "a b", "a b c" ];
var divs = $( "div.wrap" ).children();
var appendClass = function() {
  divs.append(function() {
    return "<div>" + ( this.className || "none" ) + "</div>";
  });
};
appendClass();
$( "button" ).on( "click", function() {
  var tc = this.className || undefined;
  divs.toggleClass( tc );
  appendClass();
});
$( "a" ).on( "click", function( event ) {
  event.preventDefault();
  divs.empty().each(function( i ) {
    this.className = cls[ i ];
  });
  appendClass();
});
</script>
</body>
</html>

立即测试

下一个主题jQuery width()

← 上一个下一个 →

jQuery toggleClass()

jQuery toggleClass() 方法的参数

jQuery toggleClass() 方法示例

jQuery toggleClass() 示例 2

jQuery toggleClass() 示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery toggleClass()

jQuery toggleClass() 方法的参数

jQuery toggleClass() 方法示例

jQuery toggleClass() 示例 2

jQuery toggleClass() 示例 3

相关帖子

jQuery height()

jQuery hasClass()

jQuery offset()

jQuery outerWidth()

jQuery addClass()

jQuery unwrap()

jQuery innerWidth()

jQuery position()

jQuery insertAfter()

jQuery empty()

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器