jQuery實(shí)現(xiàn)多按鈕單擊變色

字號(hào):


    這個(gè)小特效代碼很簡(jiǎn)單,就不多做說(shuō)明了,直接奉上源碼。
    JQuery代碼:
    代碼如下:
    <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代碼:
    代碼如下:
    <style type="text/css">
    .start
    {
    cursor:pointer;
    color:Green;
    }
    .end
    {
    cursor:pointer;
    color:Red;
    }
    </style>
    Html代碼:
    代碼如下:
    <span onclick="dj(this)">LoveOne</span>
    <span onclick="dj(this)">LoveTwo</span>
    <span onclick="dj(this)">LoveThree</span>
    <span onclick="dj(this)">LoveFour</span>
    是不是很簡(jiǎn)單,特效也很好玩,小伙伴們可以自由發(fā)揮下,可擴(kuò)展性還是很強(qiáng)的,如果做出來(lái)其他更好玩的,還請(qǐng)告訴我。