有多個按鈕,點擊一個變色,點擊另一個變色,原來的恢復顏色的方法


之前用到網上說的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>

這樣點擊一個按鈕變色,再點擊另一個按鈕原來的按鈕就恢復顏色。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM