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代码格式化和语法着色V2
Oct 14 Javascript
javascript 面向对象 function类
May 13 Javascript
jQuery getJSON 处理json数据的代码
Jul 26 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
Dec 03 Javascript
JavaScript图像延迟加载库Echo.js
Apr 05 Javascript
Node.js中看JavaScript的引用
Apr 22 Javascript
基于javaScript的this指向总结
Jul 22 Javascript
JavaScript显式数据类型转换详解
Mar 18 Javascript
TypeScript之调用栈的实现
Dec 31 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 Javascript
js实现简单选项卡制作
Aug 05 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
Nov 11 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对图像的各种处理函数代码小结
2013/07/08 PHP
解决PHP4.0 和 PHP5.0类构造函数的兼容问题
2013/08/01 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
php错误日志简单配置方法
2016/07/11 PHP
php 基础函数
2017/02/10 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
使用PHP访问RabbitMQ消息队列的方法示例
2018/06/06 PHP
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
2009/02/18 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
解决webpack dev-server不能匹配post请求的问题
2018/08/24 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
使用Django和Python创建Json response的方法
2018/03/26 Python
python3 读取Excel表格中的数据
2018/10/16 Python
python 定义n个变量方法 (变量声明自动化)
2018/11/10 Python
Python爬虫之Selenium实现键盘事件
2020/12/04 Python
CSS3 旋转立方体问题详解
2020/01/09 HTML / CSS
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
阿迪达斯奥地利官方商城:adidas.at
2016/10/16 全球购物
汉森冲浪板:Hansen Surfboards
2018/05/19 全球购物
牵手50新加坡:专为黄金岁月的单身人士而设的交友网站
2020/08/16 全球购物
什么是servlet链?
2014/07/13 面试题
完美实现CSS垂直居中的11种方法
2021/03/27 HTML / CSS
餐饮加盟计划书
2014/01/10 职场文书
给交警的表扬信
2014/01/12 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
2014年前台文员工作总结
2014/12/08 职场文书
销售辞职信范文
2015/03/02 职场文书
2015年小学英语教师工作总结
2015/05/12 职场文书
高老头读书笔记
2015/06/30 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python