jQuery实现多按钮单击变色效果

jQuery多按钮点击变色特效实现

该特效代码实现简单，直接提供完整源码。

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 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>

实现简单且趣味性强，具有较高扩展性，欢迎尝试并分享更多创意。