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)簽:
<a href='javascript:void(0)' id='teachControl' class='controlOff'></a>
接著寫JS腳本完成切換效果:
function switchTeachControl(){
var target = $("#teachControl");
if(target.hasClass("controlOff")){
target.removeClass("controlOff");
target.addClass("controlOn");
}else{
target.removeClass("controlOn");
target.addClass("controlOff");
}
}
- JS基于開關(guān)思想實(shí)現(xiàn)的數(shù)組去重功能【案例】
- js實(shí)現(xiàn)按鈕開關(guān)單機(jī)下拉菜單效果
- JavaScript實(shí)現(xiàn)開關(guān)等效果
- js中開關(guān)變量使用實(shí)例
- js操作css屬性實(shí)現(xiàn)div層展開關(guān)閉效果的方法
- javascript結(jié)合CSS實(shí)現(xiàn)蘋果開關(guān)按鈕特效
- JS 簡(jiǎn)單展開關(guān)閉切換代碼
- jQuery 如何實(shí)現(xiàn)一個(gè)滑動(dòng)按鈕開關(guān)
- jQuery+PHP打造滑動(dòng)開關(guān)效果
- 使用jQuery和PHP實(shí)現(xiàn)類似360功能開關(guān)效果
- JS/jQuery實(shí)現(xiàn)簡(jiǎn)單的開關(guān)燈效果【案例】
相關(guān)文章
基于JQuery的列表拖動(dòng)排序?qū)崿F(xiàn)代碼
基于JQuery的拖動(dòng)插件有幾個(gè)都相當(dāng)好用,效果也很好,但再好,還是自己琢磨一個(gè)最好。所以,我的理念就是即使實(shí)際項(xiàng)目中使用別人的程序,自己也得根據(jù)自己的理解和想法寫一個(gè)出來(lái)。那么今天,就來(lái)看看我的思路是不是可以實(shí)現(xiàn)拖動(dòng)排序的功能2013-10-10checkbox 選中一個(gè)另一個(gè)checkbox也會(huì)選中的實(shí)現(xiàn)代碼
本文給大家?guī)?lái)了checkbox選擇器之checkbox 選中一個(gè)另一個(gè)checkbox也會(huì)選中的實(shí)現(xiàn)代碼 ,非常不錯(cuò),有需要的可以參考下2016-07-07jquery 將當(dāng)前時(shí)間轉(zhuǎn)換成yyyymmdd格式的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jquery 將當(dāng)前時(shí)間轉(zhuǎn)換成yyyymmdd格式的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考2016-06-06jquery ajax提交表單數(shù)據(jù)的兩種實(shí)現(xiàn)方法
貌似AJAX越來(lái)越火了,作為一個(gè)WEB程序開發(fā)者要是不會(huì)這個(gè)感覺就要落伍,甚至有可能在求職的時(shí)候?qū)冶惶蕴?。我也是一個(gè)WEB程序開發(fā)者,當(dāng)然我也要“隨波逐流”一把,不然飯碗不保啊!2010-04-04jsTree 基于JQuery的排序節(jié)點(diǎn) Bug
jsTree(JQuery) 排序節(jié)點(diǎn) Bug的解決方法。2011-07-07jquery操作ID帶有變量的節(jié)點(diǎn)實(shí)例
下面小編就為大家?guī)?lái)一篇jquery操作ID帶有變量的節(jié)點(diǎn)實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-12-12jquery tools系列 expose 學(xué)習(xí)
不知不覺,已經(jīng)進(jìn)行到了jquery tools六大功能的第五個(gè)功能——expose的學(xué)習(xí)了,廢話不多說(shuō),直接進(jìn)入正題。2009-09-09jQuery Chart圖表制作組件Highcharts用法詳解
這篇文章主要介紹了jQuery Chart圖表制作組件Highcharts用法,詳細(xì)分析了Highcharts插件的功能與具體使用技巧及相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-06-06