jQuery实现多按钮单击变色
2014-12-01来源:易贤网

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

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>

是不是很简单,特效也很好玩,小伙伴们可以自由发挥下,可扩展性还是很强的,如果做出来其他更好玩的,还请告诉我。

更多信息请查看IT技术专栏

2025公考·省考培训课程试听预约报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
推荐信息