toggleClass 功能讲解及示例代码（1000字）

toggleClass() 方法是jQuery中一种处理类名的方法，在HTML DOM元素中添加或删除一个或多个类名，如果存在则移除，如果不存在则添加。

此方法常用于切换元素的样式或状态，通过添加或删除类名来改变元素的样式。

toggleClass()方法有以下几种用法：

1. toggleClass(className)

- 参数className是要切换的类名

- 如果元素没有该类名，则会添加；如果元素已经有该类名，则会删除

示例代码：

HTML部分：

```

Toggle Class

```

CSS部分：

```

#div1 {

width: 100px;

height: 100px;

background-color: red;

}

.highlight {

background-color: yellow;

}

```

JS部分：

```

$(document).ready(function() {

$("#btn").click(function() {

$("#div1").toggleClass("highlight");

});

});

```

解释说明：

上述代码中，当按钮被点击时，JS代码会执行$("#div1").toggleClass("highlight")方法。div元素的class属性会在highlight类名和现有的其他类名之间进行切换。如果div元素没有highlight类名，则会添加该类名，背景颜色将变为黄色；如果div元素已经有highlight类名，则会删除该类名，背景颜色将恢复为红色。

2. toggleClass(className

switch)

- 参数className是要切换的类名

- 参数switch是一个布尔值，如果为true，则添加类名；如果为false，则删除类名

示例代码：

```

$(document).ready(function() {

$("#btn").click(function() {

$("#div1").toggleClass("highlight"

true);

});

});

```

解释说明：

上述代码中，当按钮被点击时，JS代码会执行$("#div1").toggleClass("highlight"

true)方法。不论div元素是否已有highlight类名，都会将该类名添加到div元素中。

3. toggleClass(function(index

className

switch){...})

- 参数为一个回调函数，该函数返回一个或多个要添加或删除的类名

- 参数index是元素在集合中的索引位置

- 参数className是元素的类名

- 参数switch是一个布尔值，表示是否应该添加或删除该类名

示例代码：

```

$(document).ready(function() {

$("div").click(function() {

$(this).toggleClass(function(index

className

switch) {

return "highlight" + index;

});

});

});

```

解释说明：

上述代码中，当页面中的div元素被点击时，JS代码会执行$(this).toggleClass(function(index

className

switch)方法。这里回调函数返回的是一个包含元素索引的类名。例如，当*个div元素被点击时，添加的类名为highlight0，当第二个div元素被点击时，添加的类名为highlight1，以此类推。

总结：以上是toggleClass()方法的主要用法及示例代码。该方法能够方便地通过添加或删除类名来切换元素的样式或状态。掌握了toggleClass()方法的用法，可以轻松实现一些交互效果，提升用户体验。