jQuery多按钮单击变色-Web前端之家

这个小特效代码很简单，就不多做说明了，直接奉上源码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery多按钮单击变色 - Web前端之家</title>
    <style type="text/css">
        .start
        {
            cursor:pointer;
            color:Green;   
        }
        .end
        {
            cursor:pointer;
            color:Red;
        }
    </style>
</head>
<body>
<span onclick="dj(this)">LoveOne</span>
<span onclick="dj(this)">LoveTwo</span>
<span onclick="dj(this)">LoveThree</span>
<span onclick="dj(this)">LoveFour</span>
<script src="/demo/js/jquery-2.2.4.min.js" type="text/javascript"></script>
<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>
</body>
</html>

是不是很简单，特效也很好玩，小伙伴们可以自由发挥下，可扩展性还是很强的。