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的回到页面顶部按钮
Jun 27 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 Javascript
node.js中的fs.mkdir方法使用说明
Dec 17 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
JavaScript中定义类的方式详解
Jan 07 Javascript
Bootstrap警告框(Alert)插件使用方法
Mar 21 Javascript
Vue中的slot使用插槽分发内容的方法
Mar 01 Javascript
webpack file-loader和url-loader的区别
Jan 15 Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 Javascript
ant design vue datepicker日期选择器中文化操作
Oct 28 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输出数组中重名的元素的几种处理方法
2012/09/05 PHP
YII Framework框架教程之缓存用法详解
2016/03/14 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
JQuery读取XML文件数据并显示的实现代码
2009/12/16 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
javascript中setAttribute()函数使用方法及兼容性
2015/07/19 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
React Native自定义控件底部抽屉菜单的示例
2018/02/08 Javascript
解决vue中对象属性改变视图不更新的问题
2018/02/23 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
基于Three.js实现360度全景图片
2018/12/30 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
Python中生成器和yield语句的用法详解
2015/04/17 Python
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
Python3中详解fabfile的编写
2018/06/24 Python
python语言基本语句用法总结
2019/06/11 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
python实现代码统计程序
2019/09/19 Python
Python面向对象封装操作案例详解
2019/12/31 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
土耳其国际性时尚购物网站:Modanisa
2018/01/19 全球购物
大学毕业生工作的自我评价
2013/10/01 职场文书
《满井游记》教学反思
2014/02/26 职场文书
先进单位申报材料
2014/12/25 职场文书
会议通知
2015/04/15 职场文书