本文,参考《有多个按钮,点击一个变色,点击另一个变色,原来的恢复颜色》作者:沐阳的夏天。
代码如下:
一、表格中存在多个按钮
<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>