• 有多个按钮,点击一个变色,点击另一个变色,原来的恢复颜色的方法


    之前用到网上说的fouce也可行,但是失去焦点后,点击别处按钮也会恢复颜色,所以这样也行不通。后来找了好久,这个方法终于行的通。

    html代码:

    我是在table中加的按钮submit。

    <table> 
    <tr>
                    <td>
                        <input class="flag hq_hy" type="submit" onclick="dj(this);" value="行业" />
                    </td>
                    <td>
                        <input class="flag hq_zsh" type="submit" onclick="dj(this);" value="指数" />
                    </td>
                    <td>
                        <input class="flag hq_hb" type="submit" onclick="dj(this);" value="货币" />
                    </td>
                    <td>
                        <input class="flag hq_jyyc" type="submit" onclick="dj(this);" value="交易异常" />
                    </td>
                    <td>
                        <input class="flag hq_byb" type="submit" onclick="dj(this);" value="比一比" />
                    </td>
                    <td>
                        <input class="flag hq_lrcl" type="submit" style="" onclick="dj(this);" value="ETF两融策略" />
                    </td>
                </tr>
            </table>

    样式<style>

    <style>
    .hq_hy:hover, .hq_zsh:hover, .hq_hb:hover, .hq_jyyc:hover, .hq_byb:hover, .hq_lrcl:hover
      /*鼠标移上去变色(不点击)*/
    { color: #fff; border-color: #b1b0b0; background: #b1b0b0; border: none; } .start { cursor: pointer; } .end { cursor: pointer; color: #fff; background: #b1b0b0; border: none; } </style>

    其中hover是鼠标移上去的颜色。

    js代码

    <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>

    这样点击一个按钮变色,再点击另一个按钮原来的按钮就恢复颜色。

  • 相关阅读:
    openssl 生成pfx
    webpack 编译时,提示 Unexpected token: keyword «const»
    .net core 使用 Serilog 作为日志提供者
    k近邻算法
    vscode 无法自动补全第三方库
    centos 7 安装 RabbitMQ
    .net core 发布程序命令(自带运行环境)
    安装node-sass
    .net core 拦截socket
    SDN第三次作业
  • 原文地址:https://www.cnblogs.com/why-love-study/p/6025383.html
Copyright © 2020-2023  润新知