简要咨询咨询QQ网站导航网站搜索手机站点联系我们设为首页加入收藏 

jQuery实现多按钮单击变色

来源:易贤网   阅读:1928 次  日期:2014-12-01 11:20:38

温馨提示:易贤网小编为您整理了“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>

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

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

更多信息请查看脚本栏目
点此处就本文及相关问题在本站进行非正式的简要咨询(便捷快速)】     【点此处查询各地各类考试咨询QQ号码及交流群
上一篇:js获取浏览器基本信息大全
下一篇:javascript 面向对象封装与继承
易贤网手机网站地址:jQuery实现多按钮单击变色
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!