转：（很有用）有多个按钮，点击一个变色，点击另一个变色，原来的恢复颜色的方法

最新推荐文章于 2024-08-11 00:31:29 发布

logytar

最新推荐文章于 2024-08-11 00:31:29 发布

阅读量2.1w

点赞数 2

分类专栏：前端文章标签：点击按钮变色多个按钮变色

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<table> 
<tr>
                <td>
                    <input class="flag hq_hy" type="submit" οnclick="dj(this);" value="行业" />
                </td>
                <td>
                    <input class="flag hq_zsh" type="submit" οnclick="dj(this);" value="指数" />
                </td>
                <td>
                    <input class="flag hq_hb" type="submit" οnclick="dj(this);" value="货币" />
                </td>
                <td>
                    <input class="flag hq_jyyc" type="submit" οnclick="dj(this);" value="交易异常" />
                </td>
                <td>
                    <input class="flag hq_byb" type="submit" οnclick="dj(this);" value="比一比" />
                </td>
                <td>
                    <input class="flag hq_lrcl" type="submit" style="" οnclick="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>

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>

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

--链接来自：https://www.cnblogs.com/why-love-study/p/6025383.html