JQuery對class屬性的操作實現按鈕開關效果
更新時間:2013年10月11日 16:57:38 作者:
頁面中的按鈕開關效果想必大家都有見到過吧,接下來為大家詳細介紹下如何使用JQuery對class屬性的操作方法實現,感興趣的朋友不要錯過
在本文中用JQuery對class屬性的操作方法實現頁面中的按鈕開關效果。
首先定義兩個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;
}
再定義一個超鏈接標簽:
<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");
}
}
首先定義兩個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;
}
再定義一個超鏈接標簽:
復制代碼 代碼如下:
<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");
}
}
相關文章
checkbox 選中一個另一個checkbox也會選中的實現代碼
本文給大家?guī)砹薱heckbox選擇器之checkbox 選中一個另一個checkbox也會選中的實現代碼 ,非常不錯,有需要的可以參考下2016-07-07
jquery 將當前時間轉換成yyyymmdd格式的實現方法
下面小編就為大家?guī)硪黄猨query 將當前時間轉換成yyyymmdd格式的實現方法。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考2016-06-06
貌似AJAX越來越火了,作為一個WEB程序開發(fā)者要是不會這個感覺就要落伍,甚至有可能在求職的時候屢被淘汰。我也是一個WEB程序開發(fā)者,當然我也要“隨波逐流”一把,不然飯碗不保?。?/div> 2010-04-04
jQuery Chart圖表制作組件Highcharts用法詳解
這篇文章主要介紹了jQuery Chart圖表制作組件Highcharts用法,詳細分析了Highcharts插件的功能與具體使用技巧及相關注意事項,需要的朋友可以參考下2016-06-06最新評論

