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

該情況一般在點擊按鈕切換內容的情況中

2個按鈕或者多個按鈕進行互相切換內容

html

 

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

 

 

 

css

 

.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;
        }

 

 

 

js

$(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");
    }