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 相关文章推荐
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
Jan 22 Javascript
用JS写的一个TableView控件代码
Jan 23 Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 Javascript
javascript实现tab切换的四种方法
Nov 05 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
Dec 03 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 Javascript
原生JS实现的简单小钟表功能示例
Aug 30 Javascript
JQueryDOM之样式操作
Mar 27 jQuery
Vue中的transition封装组件的实现方法
Aug 13 Javascript
node使用request请求的方法
Dec 20 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 29 Javascript
基于vue实现微博三方登录流程解析
Nov 04 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 项目的方法
2007/01/02 PHP
PHP中数组定义的几种方法
2013/09/01 PHP
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
PHP中PCRE正则解析代码详解
2019/04/26 PHP
ExtJs 表单提交登陆实现代码
2010/08/19 Javascript
Jquery Ajax请求代码(2)
2011/01/07 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
浅析JS运动
2015/12/28 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
node.js express安装及示例网站搭建方法(分享)
2016/08/22 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
angular中ui calendar的一些使用心得(推荐)
2017/11/03 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
vue中的provide/inject的学习使用
2018/05/09 Javascript
NodeJs搭建本地服务器之使用手机访问的实例讲解
2018/05/12 NodeJs
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
pandas使用get_dummies进行one-hot编码的方法
2018/07/10 Python
python中的TCP(传输控制协议)用法实例分析
2019/11/15 Python
pytorch标签转onehot形式实例
2020/01/02 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
Pycharm内置终端及远程SSH工具的使用教程图文详解
2020/03/19 Python
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
2016/12/03 HTML / CSS
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
工程概预算专业毕业生求职信
2013/10/04 职场文书
中学老师的自我评价
2013/11/07 职场文书
2015年除四害工作总结
2015/07/23 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android