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 相关文章推荐
漂亮的jquery提示效果(仿腾讯弹出层)
Feb 05 Javascript
固定网页背景图同时保持图片比例的思路代码
Aug 15 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
Aug 17 Javascript
JavaScript构建自己的对象示例
Nov 29 Javascript
jquery实现拖动效果(代码分享)
Jan 25 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
Aug 27 Javascript
详解一个小实例理解js原型和继承
Apr 24 Javascript
vue使用recorder.js实现录音功能
Nov 22 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 Javascript
Vue如何基于vue-i18n实现多国语言兼容
Jul 17 Javascript
vue接通后端api以及部署到服务器操作
Aug 13 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
星际实力自我测试
2020/03/04 星际争霸
PHP 金额数字转换成英文
2010/05/06 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2011/01/27 PHP
Thinkphp自定义代码生成工具及用法说明(附下载地址)
2016/05/27 PHP
php模拟实现斗地主发牌
2020/04/22 PHP
PHP7 弃用功能
2021/03/09 PHP
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
js+HTML5实现视频截图的方法
2015/06/16 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
node.js实现爬虫教程
2020/08/25 Javascript
D3.js实现雷达图的方法详解
2016/09/22 Javascript
原生js实现公告滚动效果
2021/01/10 Javascript
vue项目首屏加载时间优化实战
2019/04/23 Javascript
weui中的picker使用js进行动态绑定数据问题
2019/11/06 Javascript
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
用django-allauth实现第三方登录的示例代码
2019/06/24 Python
使用pip安装python库的多种方式
2019/07/31 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
Python全面分析系统的时域特性和频率域特性
2020/02/26 Python
Python通过2种方法输出带颜色字体
2020/03/02 Python
matplotlib 曲线图 和 折线图 plt.plot()实例
2020/04/17 Python
基于python实现模拟数据结构模型
2020/06/12 Python
python实现控制台输出颜色
2021/03/02 Python
CSMA/CD介质访问控制协议
2015/11/17 面试题
八年级音乐教学反思
2014/01/09 职场文书
追悼会上的答谢词
2014/01/10 职场文书
中级会计职业生涯规划书
2014/03/01 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
基层党员四风问题自我剖析材料
2014/09/29 职场文书
2015年法律事务部工作总结
2015/07/27 职场文书
JS中如何优雅的使用async await详解
2021/10/05 Javascript
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫