jQuery toggleClass()
jQuery toggleClass()
使用jQuery toggleCLass()方法可从所选元素中添加或删除一个或多个类。此方法在添加和删除一个或多个类名之间切换。它检查每个元素是否有指定的类名。如果已经设置了类名，则将其删除，而如果缺少类名，则将其添加。
通过这种方式，它将创建切换效果，还可以方便您指定仅使用switch参数添加还是删除。
语法:
$(selector).toggleClass(classname,function(index,currentclass),switch)
jQuery toggleClass()方法的参数
| 参数 | 说明 |
| classname | 这是强制性参数。它指定一个或多个要添加或删除的类名。如果您使用多个类，请按空格将其分隔。 |
| function(index,currentclass),switch) | 这是一个可选参数。它指定要添加或删除的一个或多个类名。 index:它提供元素在集合中的索引位置。 currentclass:它提供所选元素的当前类别名称。 |
| switch | 它也是一个可选参数。这是一个布尔值，它指定是应添加类(true)还是应删除类(false)。 |
jQuery toggleClass()方法的示例
我们以一个示例来演示jQuery toggleClass()方法的效果。
<!DOCTYPE html>
<html>
<head>
<script src="/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! bianchenghao6.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>
输出:
Hello! bianchenghao6.com
This is popular tutorial website.
Note: Click repeatedly on the button to see the toggle effect.
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="/jquery-1.10.2.js"></script>
</head>
<body>
<p class="blue highlight">bianchenghao6.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>
输出:
bianchenghao6.com
Java Tutorial
SQL Tutorial
Android Tutorial
HTML Tutorial
etc.
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="/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>
输出: