jquery toggleClass() method
Translation results：
toggle
UK[ˈtɒgl] US[ˈtɑ:gl]
n.Stick button; lasso button; conversion key; switch key
v.Switch
class
##UK[klɑ:s] US[klæs] n.Class; class; level; type vt. Classify… into a certain level, regard… (or classify, classify); put… into a certain class adj. Very good, excellent, outstanding ofvi. Belongs to... category (or level) and is listed as a certain category (or level)jquery toggleClass() methodsyntax
Function: toggleClass() Toggles one or more classes that set or remove the selected element. This method checks the specified class in each element. Adds the class if it does not exist, or removes it if it is set. This is called a toggle effect. However, by using the "switch" parameter, you can specify that only classes be removed or only added.
Syntax: $(selector).toggleClass(class,switch)
Parameters:
| Parameter | Description |
| class | Required. Specifies the addition or removal of specified elements of class. If you need to specify several classes, use spaces to separate class names. |
| switch | Optional. Boolean value. Specifies whether to add or remove classes. |
Use function to switch classes Syntax: $(selector).toggleClass(function(index,class),switch)
Parameters:
| Parameters | Description |
| function(index,class) | Required. Specifies a function that returns one or more class names that need to be added or removed. |
| index | Optional. Accepts the index position of the selector. |
| class | Optional. Accepts the current class of the selector. |
| switch | Optional. Boolean value. Specifies whether to add (true) or remove (false) a class. |
jquery toggleClass() methodexample
<html>
<head>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").toggleClass("main");
});
});
</script>
<style type="text/css">
.main
{
font-size:120%;
color:red;
}
</style>
</head>
<body>
<h1 id="h1">This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">切换段落的 "main" 类</button>
</body>
</html>Click the "Run instance" button to view the online instance