快捷導(dǎo)航

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

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

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

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

首先定義兩個(gè)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; 
} 

再定義一個(gè)超鏈接標(biāo)簽：

復(fù)制代碼代碼如下:

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

復(fù)制代碼代碼如下:

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