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

字號:


    這個小特效代碼很簡單,就不多做說明了,直接奉上源碼。
    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>
    是不是很簡單,特效也很好玩,小伙伴們可以自由發(fā)揮下,可擴展性還是很強的,如果做出來其他更好玩的,還請告訴我。