jQuery實(shí)現(xiàn)多按鈕單擊變色
更新時(shí)間：2014年11月27日 17:03:18 投稿：hebedich
本文給大家分享的是一段使用jQuery實(shí)現(xiàn)的多按鈕單擊之后變色的代碼，非常的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。
這個(gè)小特效代碼很簡(jiǎn)單，就不多做說(shuō)明了，直接奉上源碼。
JQuery代碼：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
//加載事件
$(function () {
var collection = $(".flag");
$.each(collection, function () {
$(this).addClass("start");
});
});
//單擊事件
function dj(dom) {
var collection = $(".flag");
$.each(collection, function () {
$(this).removeClass("end");
$(this).addClass("start");
});
$(dom).removeClass("start");
$(dom).addClass("end");
}
</script>
Css代碼：
復(fù)制代碼 代碼如下:
<style type="text/css">
.start
{
cursor:pointer;
color:Green;
}
.end
{
cursor:pointer;
color:Red;
}
</style>
Html代碼：
復(fù)制代碼 代碼如下:
<span class="flag" onclick="dj(this)">LoveOne</span>
<span class="flag" onclick="dj(this)">LoveTwo</span>
<span class="flag" onclick="dj(this)">LoveThree</span>
<span class="flag" onclick="dj(this)">LoveFour</span>
是不是很簡(jiǎn)單，特效也很好玩，小伙伴們可以自由發(fā)揮下，可擴(kuò)展性還是很強(qiáng)的，如果做出來(lái)其他更好玩的，還請(qǐng)告訴我。
您可能感興趣的文章:
- jQuery動(dòng)態(tài)生成不規(guī)則表格(前后端)
- jQuery動(dòng)態(tài)生成表格及右鍵菜單功能示例
- JQuery 動(dòng)態(tài)生成Table表格實(shí)例代碼
- jQuery動(dòng)態(tài)生成Bootstrap表格
- JQuery Ajax動(dòng)態(tài)生成Table表格
- Jquery 動(dòng)態(tài)生成表格示例代碼
- 用JQuery實(shí)現(xiàn)表格隔行變色和突出顯示當(dāng)前行的代碼
- jQuery代碼實(shí)現(xiàn)表格中點(diǎn)擊相應(yīng)行變色功能
- jQuery輕松實(shí)現(xiàn)表格的隔行變色和點(diǎn)擊行變色的實(shí)例代碼
- jQuery插件實(shí)現(xiàn)表格隔行變色及鼠標(biāo)滑過(guò)高亮顯示效果代碼
- jquery實(shí)現(xiàn)表格中點(diǎn)擊相應(yīng)行變色功能效果【實(shí)例代碼】
- jQuery實(shí)現(xiàn)表格隔行及滑動(dòng),點(diǎn)擊時(shí)變色的方法【測(cè)試可用】
- jQuery實(shí)現(xiàn)動(dòng)態(tài)生成表格并為行綁定單擊變色動(dòng)作的方法
相關(guān)文章
這篇文章主要介紹了Jquery響應(yīng)回車鍵直接提交表單操作代碼,推薦使用keyup哦,文中有說(shuō)明,需要的朋友可以參考下2014-07-07
jQuery實(shí)現(xiàn)table隔行換色和鼠標(biāo)經(jīng)過(guò)變色的兩種方法
這篇文章主要介紹jQuery實(shí)現(xiàn)table隔行換色和鼠標(biāo)經(jīng)過(guò)變色的兩種方法,需要的朋友可以參考下2014-06-06
jQuery插件datalist實(shí)現(xiàn)很好看的input下拉列表
本文給大家分享的是使用jQuery實(shí)現(xiàn)的房HTML5中的一個(gè)好看的input框很好看的下拉列表--datalist，兼容性非常不錯(cuò)，這里推薦給大家，有需要的小伙伴可以參考下。2015-07-07
這篇文章主要介紹了jQuery后代選擇器用法,以設(shè)置文本顏色的實(shí)例分析了后代選擇器的應(yīng)用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了jQuery中has()方法用法,實(shí)例分析了has()方法的功能、定義及保留包含特定后代的匹配元素的使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了jquery常用操作小結(jié),需要的朋友可以參考下2014-07-07
這篇文章主要介紹了jquery判斷單選按鈕radio是否選中的方法,實(shí)例分析了加載頁(yè)面時(shí)獲取單選按鈕ID和點(diǎn)擊按鈕時(shí)獲取單選按鈕ID兩種方法,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-05-05
精彩的彈幕效果分享給大家，具有一定的參考價(jià)值，感興趣的朋友可以嘗試制作彈幕，具體內(nèi)容如下2016-07-07
jQuery使用attr()方法同時(shí)設(shè)置多個(gè)屬性值用法實(shí)例
這篇文章主要介紹了jQuery使用attr()方法同時(shí)設(shè)置多個(gè)屬性值的用法,實(shí)例分析了jQuery中attr方法實(shí)現(xiàn)多個(gè)屬性設(shè)置的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
jQuery中的.bind()、.live()和.delegate()之間區(qū)別分析
jQuery中的.bind()、.live()和.delegate()之間區(qū)別分析，學(xué)習(xí)jquery的朋友可以參考下。2011-06-06