zoukankan      html  css  js  c++  java
  • 多按钮单击变色

    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>
  • 相关阅读:
    HTML5 h1多层次样式问题
    spellcheck
    Favicon
    设计模式
    CSS 宽高的计算
    行高计算
    White-space 属性
    简约插件Plug-in for simple
    js类型及其判断
    前端路由
  • 原文地址:https://www.cnblogs.com/wykLog/p/4094042.html
Copyright © 2011-2022 走看看