<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>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>这样点击一个按钮变色，再点击另一个按钮原来的按钮就恢复颜色。
--链接来自：https://www.cnblogs.com/why-love-study/p/6025383.html