本文，参考《有多个按钮，点击一个变色，点击另一个变色，原来的恢复颜色》作者：沐阳的夏天。
代码如下：
一、表格中存在多个按钮
<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> .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是鼠标移上去的颜色。
三、事件和函数
<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>
