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 相关文章推荐
获取HTML DOM节点元素的方法的总结
Aug 21 Javascript
jQuery技巧大放送 学习jquery的朋友可以看下
Oct 14 Javascript
删除javascript中注释语句的正则表达式
Jun 11 Javascript
jquery模拟alert的弹窗插件
Jul 31 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
Aug 01 Javascript
超全面的vue.js使用总结
Feb 12 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 Javascript
Web安全之XSS攻击与防御小结
Dec 13 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
Apr 29 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 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中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
2014/08/14 Javascript
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
微信小程序wxs实现吸顶效果
2020/01/08 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
在Python 不同级目录之间模块的调用方法
2019/01/19 Python
python实现函数极小值
2019/07/10 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
Pytorch 多维数组运算过程的索引处理方式
2019/12/27 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
Python无损压缩图片的示例代码
2020/08/06 Python
html5的画布canvas——画出简单的矩形、三角形实例代码
2013/06/09 HTML / CSS
J2EE中的容器都包括哪些
2013/08/21 面试题
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
揠苗助长教学反思
2014/02/04 职场文书
21岁生日感言
2014/02/27 职场文书
品质管理部岗位职责范文
2014/03/01 职场文书
信息与工商管理职业规划范文:为梦想而搏击
2014/09/11 职场文书
教学质量月活动总结
2015/05/11 职场文书
雷锋的故事观后感
2015/06/10 职场文书
文明上网主题班会
2015/08/14 职场文书
校运会广播稿
2015/08/19 职场文书
学校标语口号大全
2015/12/26 职场文书
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android