当前位置:首页 > 编程教程 > jQuery技术文章 > jQuery实现多按钮单击变色

jQuery实现多按钮单击变色的代码详解

  • 发布时间:
  • 作者:码农之家
  • 点击:137

这篇文章主要知识点是关于jQuery、多按钮、单击变色、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

jQuery实战从入门到精通
  • 类型:jQuery大小:189.1 MB格式:PDF作者:未来科技
立即下载

jQuery实现多按钮单击变色

这个小特效代码很简单,就不多做说明了,直接奉上源码。

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>

 

是不是很简单,特效也很好玩,小伙伴们可以自由发挥下,可扩展性还是很强的,如果做出来其他更好玩的,还请告诉我。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

您可能感兴趣的文章:

  • 实例介绍jQuery图片左右滚动代码 有左右按钮
  • jquery自定义button按钮的方法总结
  • jQuery 相关电子书
    学习笔记
    网友NO.137950

    jquery 按钮状态效果 正常、移上、按下

    在网页设计过程中,经常遇见按钮的各状态效果。写了一个jquery扩展,使这个过程更方便! 使用前注意引用Jquery; JqueryExtend.js: (function ($) { // Button按钮的三种样式替换,如果isState参数为True则记录按下状态 $.fn.btnEffect = function (normal, mouseover, mousedown, isState) { var lastButton; this.each(function () { $(this).bind({ mouseover: function () { if (this != lastButton || !isState) { $(this).removeClass().addClass(mouseover) } }, mouseout: function () { if (this != lastButton || !isState) { $(this).removeClass().addClass(normal) } }, mousedown: function () { if (this != lastButton || !isState) { if (lastButton != null) { $(lastButton).removeClass().addClass(normal); } $(this).removeClass().addClass(mousedown); lastButton = this; } } }); }); } })(jQuery); 示例页面Default.aspx: %@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="JqueryExtend_Default" % !DOCTYPE html PUBLIC "-//W3C/……

    网友NO.985534

    jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮

    菜单(Menu)定义在一些 DIV 标记中,如下所示: div id="mm" class="easyui-menu" div onclick="javascript:alert('new')"New/div div spanOpen/span div divbWord/b/div divExcel/div divPowerPoint/div /div /div div icon="icon-save"Save/div div class="menu-sep"/div divExit/div /div 当菜单创建之后是不显示的,调用 'show' 方法显示它或者调用 'hide' 方法隐藏它: $('#mm').menu('show', { left: 200, top: 100 }); 创建链接按钮(Link Button) 通常情况下,使用 button 元素来创建按钮,而链接按钮(Link Button)则是使用 a 元素来创建的。所以实际上一个链接按钮(Link Button)就是一个显示为按钮样式的 a 元素。 为了创建链接按钮(Link Button),所有您需要做的就是添加一个名为 'easyui-linkbutton' 的 class 属性到 a 元素: div a href="#" class="easyui-linkbutton" iconCls="icon-cancel"Cancel/a a href="#" class="easyui-linkbutton" iconCls="icon-reload"Refresh/a a href="#" clas……

    网友NO.216088

    jquery fancybox ie6不显示关闭按钮的解决办法

    解决办法: 打开jquery.fancybox-1.3.4.css 注释掉这行就行了: .fancybox-ie6 #fancybox-close { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_close.png', sizingMethod='scale'); } ……

    <
    1
    >

    Copyright 2018-2020 www.xz577.com 码农之家

    版权投诉 / 书籍推广 / 赞助:520161757@qq.com