toggle
英 [?t?gl]? ?美 [?tɑ:gl]??
n.棒形紐扣;套索扣;轉(zhuǎn)換鍵;切換鍵
v.切換
class
英 [klɑ:s]? ?美 [kl?s]??
n.班;階級;等級;種類
vt.把…歸入某等級,把…看作(或分類、歸類);把…編入某一班級
adj.很好的,優(yōu)秀的,出色的
vi.屬于…類(或等級),被列為某類(或某級)
jquery toggleClass()方法 語法
作用:toggleClass() 對設(shè)置或移除被選元素的一個(gè)或多個(gè)類進(jìn)行切換。該方法檢查每個(gè)元素中指定的類。如果不存在則添加類,如果已設(shè)置則刪除之。這就是所謂的切換效果。不過,通過使用 "switch" 參數(shù),您能夠規(guī)定只刪除或只添加類。
語法:$(selector).toggleClass(class,switch)
參數(shù):
參數(shù) | 描述 |
class? ?? | 必需。規(guī)定添加或移除 class 的指定元素。如需規(guī)定若干 class,請使用空格來分隔類名。 |
switch? ?? | 可選。布爾值。規(guī)定是否添加或移除 class。?? |
使用函數(shù)來切換類語法:$(selector).toggleClass(function(index,class),switch)
參數(shù):
參數(shù) | 描述 |
function(index,class)? | 必需。規(guī)定返回需要添加或刪除的一個(gè)或多個(gè)類名的函數(shù)。 |
index? | 可選。接受選擇器的 index 位置。 |
class? | 可選。接受選擇器的當(dāng)前的類。 |
switch? ?? | 可選。布爾值。規(guī)定是否添加(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>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例