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 实现复制到粘贴板的功能代码
May 13 Javascript
JavaScript 拾碎[三] 使用className属性
Oct 16 Javascript
基于JQuery的动态删除Table表格的行和列的代码
May 12 Javascript
Jquery 获取checkbox的checked问题
Nov 16 Javascript
浅谈JS之tagNaem和nodeName
Sep 13 Javascript
React.js中常用的ES6写法总结(推荐)
May 09 Javascript
Angular如何引入第三方库的方法详解
Jul 13 Javascript
解决微信二次分享不显示摘要和图片的问题
Aug 18 Javascript
layui.js实现的表单验证功能示例
Nov 15 Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
angularJs中$http获取后台数据的实例讲解
Aug 08 Javascript
前端监听websocket消息并实时弹出(实例代码)
Nov 27 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
php读取html并截取字符串的简单代码
2009/11/30 PHP
通过缓存数据库结果提高PHP性能的原理介绍
2012/09/05 PHP
解析php开发中的中文编码问题
2013/08/08 PHP
zf框架的Filter过滤器使用示例
2014/03/13 PHP
神盾加密解密教程(一)PHP变量可用字符
2014/05/28 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
2010/02/07 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
javascript 闭包详解
2015/02/15 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
AngularJS 单元测试(一)详解
2016/09/21 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
node实现简单的反向代理服务器
2017/07/26 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
vue 实现全选全不选的示例代码
2018/03/29 Javascript
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
在django view中给form传入参数的例子
2019/07/19 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
什么是python的函数体
2020/06/19 Python
全球最大的游戏市场:G2A
2018/07/05 全球购物
Christys’ Hats官网:英国帽子制造商
2018/11/28 全球购物
写一个用矩形法求定积分的通用函数
2012/11/08 面试题
家长会主持词开场白
2014/03/18 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
安全教育的主题班会
2015/08/13 职场文书
创业计划书之青年旅馆
2019/09/23 职场文书
golang 实用库gotable的具体使用
2021/07/01 Golang
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS