toggle

英 [ˈtɒgl]   美 [ˈtɑ:gl]  

n.棒形纽扣;套索扣;转换键;切换键

v.切换

class

英 [klɑ:s]   美 [klæs]  

n.班;阶级;等级;种类

vt.把…归入某等级,把…看作(或分类、归类);把…编入某一班级

adj.很好的,优秀的,出色的

vi.属于…类(或等级),被列为某类(或某级)

jquery toggleClass()方法 语法

作用:toggleClass() 对设置或移除被选元素的一个或多个类进行切换。该方法检查每个元素中指定的类。如果不存在则添加类,如果已设置则删除之。这就是所谓的切换效果。不过,通过使用 "switch" 参数,您能够规定只删除或只添加类。

语法:$(selector).toggleClass(class,switch)

参数:

参数描述
class    必需。规定添加或移除 class 的指定元素。如需规定若干 class,请使用空格来分隔类名。
switch    可选。布尔值。规定是否添加或移除 class。  

使用函数来切换类语法:$(selector).toggleClass(function(index,class),switch)

参数:

参数描述
function(index,class) 必需。规定返回需要添加或删除的一个或多个类名的函数。
index 可选。接受选择器的 index 位置。
class 可选。接受选择器的当前的类。
switch    可选。布尔值。规定是否添加(true)或移除(false)类。

jquery toggleClass()方法 示例

<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>
运行实例 »

点击 "运行实例" 按钮查看在线实例