多個按鈕點選為選擇狀態
阿新 • • 發佈：2019-01-25
<html>
<head>
<meta charset="utf-8">
<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>
</style>
</head>
<script src='jquery1.12.4.min.js'></script>
<body>
<table>
<tr>
<td>
<input class="flag" type="submit" onclick="dj(this);" value="行業" />
</td>
<td>
<input class="flag" type="submit" onclick="dj(this);" value="指數" />
</td>
<td>
<input class="flag" type="submit" onclick="dj(this);" value="貨幣" />
</td>
<td>
<input class="flag" type="submit" onclick="dj(this);" value="交易異常" />
</td>
<td>
<input class="flag" type="submit" onclick="dj(this);" value="比一比" />
</td>
<td>
<input class="flag" type="submit" style="" onclick="dj(this);" value="ETF兩融策略" />
</td>
</tr>
</table>
<div id='hh' style='display:none;'>45465</div>
</body>
<script type="text/javascript">
$("#hh").show()
$(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");
<head>
<meta charset="utf-8">
<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>
</style>
</head>
<script src='jquery1.12.4.min.js'></script>
<body>
<table>
<tr>
<td>
<input class="flag" type="submit" onclick="dj(this);" value="行業" />
</td>
<td>
<input class="flag" type="submit" onclick="dj(this);" value="指數" />
</td>
<td>
<input class="flag" type="submit" onclick="dj(this);" value="貨幣" />
</td>
<td>
<input class="flag" type="submit" onclick="dj(this);" value="交易異常" />
</td>
<td>
<input class="flag" type="submit" onclick="dj(this);" value="比一比" />
</td>
<td>
<input class="flag" type="submit" style="" onclick="dj(this);" value="ETF兩融策略" />
</td>
</tr>
</table>
<div id='hh' style='display:none;'>45465</div>
</body>
<script type="text/javascript">
$("#hh").show()
$(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>