之前用到网上说的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>
这样点击一个按钮变色,再点击另一个按钮原来的按钮就恢复颜色。