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 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
textarea的value是html文件源代码,存成html文件的代码
Apr 20 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
May 12 Javascript
浅谈js和css内联外联注意事项
Jun 30 Javascript
JavaScript Ajax编程 应用篇
Jul 02 Javascript
详解vue mint-ui源码解析之loadmore组件
Oct 11 Javascript
浅谈webpack打包之后的文件过大的解决方法
Mar 07 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
JS实现数组深拷贝的方法分析
Mar 06 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
Jul 03 Javascript
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
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
怎样才能成为PHP高手?学会“懒惰”的编程
2006/12/05 PHP
PHP中str_split()函数的用法讲解
2019/04/11 PHP
QQ登录简单实现代码
2021/03/09 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
js拼接html字符串的注意事项
2016/10/13 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
原生微信小程序开发中 redux 的使用详解
2021/02/18 Javascript
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
Python 操作文件的基本方法总结
2017/08/10 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
python 无损批量压缩图片(支持保留图片信息)的示例
2020/09/22 Python
巴西手表购物网站:eclock
2019/03/19 全球购物
Monica Vinader官网:英国轻奢珠宝品牌
2020/02/05 全球购物
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
国际花店:Pickup Flowers
2020/04/10 全球购物
小饰品店的创业计划书范文
2013/12/28 职场文书
优秀班集体获奖感言
2014/02/03 职场文书
广告词串烧
2014/03/19 职场文书
生态养殖创业计划书
2014/05/06 职场文书
冬季施工防火方案
2014/05/17 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
旷课检讨书500字
2014/10/14 职场文书
亮剑观后感
2015/06/05 职场文书
利用Nginx代理如何解决前端跨域问题详析
2021/04/02 Servers
Redis6.0搭建集群Redis-cluster的方法
2021/05/08 Redis
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫