以前用到網上說的fouce也可行,可是失去焦點後,點擊別處按鈕也會恢復顏色,因此這樣也行不通。後來找了很久,這個方法終於行的通。javascript
html代碼:html
我是在table中加的按鈕submit。java
<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>dom
<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是鼠標移上去的顏色。this
js代碼spa
<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>
這樣點擊一個按鈕變色,再點擊另外一個按鈕原來的按鈕就恢復顏色。code