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 相关文章推荐
Json对象与Json字符串互转(4种转换方式)
Mar 27 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
Apr 06 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
Jun 13 Javascript
原生javascript 学习之js变量全面了解
Jul 14 Javascript
通过原生JS实现为元素添加事件的方法
Nov 23 Javascript
原生js仿浏览器滚动条效果
Mar 02 Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
Aug 20 Javascript
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
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实现算式验证码和汉字验证码实例
2015/03/09 PHP
PHP7匿名类用法分析
2016/09/26 PHP
php头像上传预览实例代码
2017/05/02 PHP
基于JQuery的一句代码实现表格的简单筛选
2010/07/26 Javascript
js自动下载文件到本地的实现代码
2013/04/28 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
2013/11/25 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
js实现仿阿里巴巴城市选择框效果实例
2015/06/24 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
JS及PHP代码编写八大排序算法
2016/07/12 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
Vue2 使用 Echarts 创建图表实例代码
2017/05/18 Javascript
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
分享给Python新手们的几道简单练习题
2017/09/21 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
Python实用库 PrettyTable 学习笔记
2019/08/06 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
社区清明节活动总结
2014/07/04 职场文书
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
成事在人观后感
2015/06/16 职场文书
2016年企业安全生产月活动总结
2016/04/06 职场文书
Go语言空白表示符_的实例用法
2021/07/04 Golang
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS
Python Pandas 删除列操作
2022/03/16 Python
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫