快捷導航

JQuery對class屬性的操作實現(xiàn)按鈕開關(guān)效果

更新時間：2013年10月11日 16:57:38 作者：

頁面中的按鈕開關(guān)效果想必大家都有見到過吧，接下來為大家詳細介紹下如何使用JQuery對class屬性的操作方法實現(xiàn)，感興趣的朋友不要錯過

在本文中用JQuery對class屬性的操作方法實現(xiàn)頁面中的按鈕開關(guān)效果。

首先定義兩個class：

 
.controlOff{ 
display:inline-block; 
width:130px; 
height:36px; 
cursor:pointer; 
background-image:url("../iclass/images/teach_off.png"); 
background-repeat: no-repeat; 
} 

.controlOn{ 
display:inline-block; 
width:130px; 
height:36px; 
cursor:pointer; 
background-image:url("../iclass/images/teach_on.png"); 
background-repeat: no-repeat; 
} 

再定義一個超鏈接標簽：

復制代碼代碼如下:

接著寫JS腳本完成切換效果：

復制代碼代碼如下:

 
function switchTeachControl(){ 
var target = $("#teachControl"); 
if(target.hasClass("controlOff")){ 
target.removeClass("controlOff"); 
target.addClass("controlOn"); 

}else{ 
target.removeClass("controlOn"); 
target.addClass("controlOff"); 

} 
} 

您可能感興趣的文章:

相關(guān)文章

jQuery動態(tài)生成表格及右鍵菜單功能示例
這篇文章主要介紹了jQuery動態(tài)生成表格及右鍵菜單功能,結(jié)合實例形式分析了jQuery表格的動態(tài)操作及鼠標事件響應(yīng)相關(guān)技巧,需要的朋友可以參考下
2017-01-01
jQuery中:animated選擇器用法實例
這篇文章主要介紹了jQuery中:animated選擇器用法,實例分析了:animated選擇器的功能、定義及匹配動畫效果元素的使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下
2014-12-12
jQuery Tools tab(幻燈片)
老規(guī)矩，先上html和css,還是用官方的，只是去掉了些東西
2012-07-07
jquery通過select列表選擇框?qū)Ρ砀駭?shù)據(jù)進行過濾示例
這篇文章主要介紹了jquery通過select列表選擇框?qū)Ρ砀駭?shù)據(jù)進行過濾示例,需要的朋友可以參考下
2014-05-05
jQuery選擇器源碼解讀（一）：Sizzle方法
這篇文章主要介紹了jQuery選擇器源碼解讀（一）：Sizzle方法,本文用詳細的注釋解讀了Sizzle方法的實現(xiàn)源碼,需要的朋友可以參考下
2015-03-03
jQuery實現(xiàn)彈彈球小游戲
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)彈彈球小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
jQuery 選擇器、DOM操作、事件、動畫
jquery的東西也算不少，記下來有助于以后參考。這樣也挺方便。
2010-11-11
jQuery之過濾元素操作小結(jié)
這篇文章主要介紹了jQuery中的過濾元素操作。需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11
jQuery?基礎(chǔ)選擇器與屬性選擇器
這篇文章主要介紹了jQuery?基礎(chǔ)選擇器與屬性選擇器，選擇所有元素,此選擇器使用要慎重，其速度是極其慢的，詳細介紹內(nèi)容需要的小伙伴可以參考一下下面文章內(nèi)容
2022-08-08
EasyUI中在表單提交之前進行驗證
這篇文章主要介紹了EasyUI中在表單提交之前進行驗證的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-07-07