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得到XML某节点的子节点个数的脚本
Oct 11 Javascript
用javascript将数据导入Excel示例代码
Sep 10 Javascript
js淡入淡出的图片轮播效果代码分享
Aug 24 Javascript
JavaScript实现的背景自动变色代码
Oct 17 Javascript
jquery实现左右无缝轮播图
Jul 31 Javascript
简单几步实现返回顶部效果
Dec 05 Javascript
js实现弹窗暗层效果
Jan 16 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
Jul 03 Javascript
详解Webpack抽离第三方类库以及common解决方案
Mar 30 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 Javascript
使用JS前端技术实现静态图片局部流动效果
Aug 05 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 array操作10个小技巧分享
2011/06/23 PHP
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
php实现网站留言板功能
2015/11/04 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
jQuery Validate初步体验(二)
2015/12/12 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
解决Antd Table表头加Icon和气泡提示的坑
2020/11/17 Javascript
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
浅谈Python基础之I/O模型
2017/05/11 Python
Python实现OpenCV的安装与使用示例
2018/03/30 Python
20行python代码实现人脸识别
2019/05/05 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
python如何爬取动态网站
2020/09/09 Python
python3列表删除大量重复元素remove()方法的问题详解
2021/01/04 Python
HTML5 新表单类型示例代码
2018/03/20 HTML / CSS
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
妇女干部培训方案
2014/05/12 职场文书
汉语专业毕业生自荐信
2014/07/06 职场文书
护士医德考评自我评价
2015/03/03 职场文书
毕业证明书
2015/06/19 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书
《将心比心》教学反思
2016/02/23 职场文书