之前用到网上说的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>
这样点击一个按钮变色，再点击另一个按钮原来的按钮就恢复颜色。
如果觉得《有多个按钮 点击一个变色 点击另一个变色 原来的恢复颜色的方法》对你有帮助，请点赞、收藏，并留下你的观点哦！
