jQuery实现多按钮单击变色


Posted in Javascript onNovember 27, 2014

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

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>

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

Javascript 相关文章推荐
心扬JS分页函数代码
Sep 10 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
Nov 16 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
Jul 06 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
基于jQuery实现表格内容的筛选功能
Aug 21 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
Jun 22 Javascript
详解angular部署到iis出现404解决方案
Aug 14 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
Feb 13 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
Apr 22 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 Javascript
jQuery的ready方法详解
Nov 27 #Javascript
javascript 面向对象封装与继承
Nov 27 #Javascript
javascript制作坦克大战全纪录(2)
Nov 27 #Javascript
javascript制作坦克大战全纪录(1)
Nov 27 #Javascript
使用jsonp完美解决跨域问题
Nov 27 #Javascript
JavaScript变量声明详解
Nov 27 #Javascript
js脚本实现数据去重
Nov 27 #Javascript
You might like
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
PHP学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
php配置php-fpm启动参数及配置详解
2013/11/04 PHP
php异步多线程swoole用法实例
2014/11/14 PHP
php中fsockopen用法实例
2015/01/05 PHP
PHP发送AT指令实例代码
2016/05/26 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
JavaScript XML实现两级级联下拉列表
2008/11/10 Javascript
jQuery基于扩展实现的倒计时效果
2016/05/14 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
jQuery插件之validation插件
2017/03/29 jQuery
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
JavaScript创建对象方法实例小结
2018/09/03 Javascript
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
Python实现队列的方法
2015/05/26 Python
Python下rrdtool模块的基本使用方法
2015/11/13 Python
python用post访问restful服务接口的方法
2018/12/07 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
python 发送json数据操作实例分析
2019/10/15 Python
Python matplotlib画曲线例题解析
2020/02/07 Python
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
党支部书记先进事迹
2014/01/17 职场文书
摄影助理岗位职责
2014/02/07 职场文书
少年闰土教学反思
2014/02/22 职场文书
《理想的风筝》教学反思
2014/04/11 职场文书
致共产党员倡议书
2014/04/16 职场文书
五一劳动节慰问信
2015/02/14 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
环保证明
2015/06/23 职场文书
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android