JQuery中的样式切换
jQuery提供一個(gè)toggleClass方法用于簡(jiǎn)化這種互斥的邏輯，通過toggleClass方法動(dòng)態(tài)添加刪除Class，一次執(zhí)行相當(dāng)于addClass，再次執(zhí)行相當(dāng)于removeClass。
.toggleClass( )方法：在匹配的元素集合中的每個(gè)元素上添加或刪除一個(gè)或多個(gè)樣式類,取決于這個(gè)樣式類是否存在或值切換屬性。即：如果存在（不存在）就刪除（添加）一個(gè)類
toggleClass方法簡(jiǎn)介：
1..toggleClass( className )：在匹配的元素集合中的每個(gè)元素上用來切換的一個(gè)或多個(gè)（用空格隔開）樣式類名
2..toggleClass( className, switch )：一個(gè)布爾值，用于判斷樣式是否應(yīng)該被添加或移除
3..toggleClass( [switch ] )：一個(gè)用來判斷樣式類添加還是移除的 布爾值
4..toggleClass( function(index, class, switch) [, switch ] )：用來返回在匹配的元素集合中的每個(gè)元素上用來切換的樣式類名的一個(gè)函數(shù)。接收元素的索引位置和元素舊的樣式類作為參數(shù)
注意：
1.toggleClass是一個(gè)互斥的邏輯，也就是通過判斷對(duì)應(yīng)的元素上是否存在指定的Class名，如果有就刪除，如果沒有就增加
2.toggleClass會(huì)保留原有的Class名后新增，通過空格隔開
實(shí)戰(zhàn)操練：
<!DOCTYPE HTML> <html><head><meta charset="utf-8"><title>隔行換色</title><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script><style type="text/css">body,table,td,{font-family: Arial, Helvetica, sans-serif;font-size: 12px;}.h {background: #f3f3f3;color: #000;}.c {background: #ebebeb;color: #000;}</style> </head><body><h4>.toggleClass(className)和.toggleClass(className,switch)</h4><table id="table" width="50%" border="0" cellpadding="3" cellspacing="1"><tr><td>慕課jQuery入門</td><td>慕課jQuery入門</td></tr><tr><td>慕課jQuery入門</td><td>慕課jQuery入門</td></tr><tr><td>慕課jQuery入門</td><td>慕課jQuery入門</td></tr><tr><td>慕課jQuery入門</td><td>慕課jQuery入門</td></tr><tr><td>慕課jQuery入門</td><td>慕課jQuery入門</td></tr></table></div><script type="text/javascript">//給所有的tr元素加一個(gè)class="c"的樣式$("#table tr").toggleClass("c");</script><script type="text/javascript">//給所有的偶數(shù)tr元素切換class="c"的樣式//所有基數(shù)的樣式保留，偶數(shù)的被刪除$("#table tr:odd").toggleClass("c");</script><script type="text/javascript">//第二個(gè)參數(shù)判斷樣式類是否應(yīng)該被添加或刪除//true，那么這個(gè)樣式類將被添加;//false，那么這個(gè)樣式類將被移除//所有的奇數(shù)tr元素，應(yīng)該都保留class="c"樣式$("#table tr:even").toggleClass("c", true); //這個(gè)操作沒有變化，因?yàn)闃邮揭呀?jīng)是存在的</body></html>執(zhí)行結(jié)果：
總結(jié)
以上是生活随笔為你收集整理的JQuery中的样式切换的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： atm机跨行存款要手续费吗 在atm机上
- 下一篇： JQuery中的样式操作