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 相关文章推荐
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
Nov 30 Javascript
javascript实现原生ajax的几种方法介绍
Sep 21 Javascript
jquery实现非叠加式的搜索框提示效果
Jan 07 Javascript
JS+html5制作简单音乐播放器
Sep 13 Javascript
js实现股票实时刷新数据案例
May 14 Javascript
JavaScript设计模式之单例模式简单实例教程
Jul 02 Javascript
基于element-ui组件手动实现单选和上传功能
Dec 06 Javascript
fetch 如何实现请求数据
Dec 20 Javascript
在layui tab控件中载入外部html页面的方法
Sep 04 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 Javascript
js根据后缀判断文件文件类型的代码
May 09 Javascript
node.js爬虫框架node-crawler初体验
Oct 29 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
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
ThinkPHP中U方法的使用浅析
2014/06/13 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
php编写的一个E-mail验证类
2015/03/25 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
js 链式延迟执行DOME
2012/01/04 Javascript
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
JS的Document属性和方法小结
2013/09/17 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
2016/06/01 Javascript
基于js实现的限制文本框只可以输入数字
2016/12/05 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
AngularJS动态菜单操作指令
2017/04/25 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
python持久性管理pickle模块详细介绍
2015/02/18 Python
Python中反射和描述器总结
2018/09/23 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
公司营业员的工作总结自我评价
2013/10/05 职场文书
单位提档介绍信
2014/01/17 职场文书
摄影助理岗位职责
2014/02/07 职场文书
思想品德课教学反思
2014/02/10 职场文书
2014年巴西世界杯口号
2014/06/05 职场文书
关于召开会议的通知
2015/04/15 职场文书
详解MongoDB的条件查询和排序
2021/06/23 MongoDB
Python实现猜拳与猜数字游戏的方法详解
2022/04/06 Python