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