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 相关文章推荐
JavaScript 基础问答三
Dec 03 Javascript
Prototype Template对象 学习
Jul 19 Javascript
改变javascript函数内部this指针指向的三种方法
Apr 23 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
Jul 13 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 Javascript
JavaScript网页定位详解
Jan 13 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
Sep 04 Javascript
微信小程序删除处理详解
Aug 16 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 Javascript
详解element-ui设置下拉选择切换必填和非必填
Jun 17 Javascript
继承行为在 ES5 与 ES6 中的区别详解
Dec 24 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与javascript的两种交互方式
2006/10/09 PHP
php获取表单中多个同名input元素的值
2014/03/20 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
php中使用session防止用户非法登录后台的方法
2015/01/27 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
2015/01/13 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
2017/07/18 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
在Python的Flask框架中使用模版的入门教程
2015/04/20 Python
Python3写入文件常用方法实例分析
2015/05/22 Python
20个常用Python运维库和模块
2018/02/12 Python
Django 使用Ajax进行前后台交互的示例讲解
2018/05/28 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
Python 项目转化为so文件实例
2019/12/23 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
幼儿园教育教学反思
2014/01/31 职场文书
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
授权委托书范本
2014/04/03 职场文书
法律系毕业生求职信
2014/05/28 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
校运会宣传稿大全
2015/07/23 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
Python如何用re模块实现简易tokenizer
2022/05/02 Python