源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

jQuery实现多按钮单击变色

  • 时间:2021-04-08 12:42 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jQuery实现多按钮单击变色
这个小特效代码很简单,就不多做说明了,直接奉上源码。 JQuery代码:
[u]复制代码[/u] 代码如下:
<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代码:
[u]复制代码[/u] 代码如下:
<style type="text/css">         .start         {             cursor:pointer;             color:Green;            }         .end         {             cursor:pointer;             color:Red;         } </style>
Html代码:
[u]复制代码[/u] 代码如下:
<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>
是不是很简单,特效也很好玩,小伙伴们可以自由发挥下,可扩展性还是很强的,如果做出来其他更好玩的,还请告诉我。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部