Question

html CSS如何设置按钮点下之后改变当前按钮的背景色

做了两个Button，怎么才能点击Button1的时候改变Button1的背景色，点击Button2的时候改变Button2的背景色，并且Button1恢复点击之前的背景色。
代码：
<form onMouseOver="change('#FFFFFF')" onMouseOut="change('#434063')">
<input type="button" name="Button1" class="thisclass ha_bor btnwidth" value="北京" onMouseOver="this.style.color='#434063'"
onMouseOut="this.style.color='#FFFFFF'" onMouseDown="this.style.color='#434063'"
style="color:#FFFFFF; font-family:黑体; font-weight:bold; font-size:8px;" onclick=""></form>

<form onMouseOver="change('#FFFFFF')" onMouseOut="change('#434063')">
<input type="button" name="Button2" class="thisclass ha_bor btnwidth" value="成都" onMouseOver="this.style.color='#434063'"
onMouseOut="this.style.color='#FFFFFF'" onMouseDown="this.style.color='#434063'"
style="color:#FFFFFF; font-family:黑体; font-weight:bold; font-size:8px;"></form>

<style>
.thisclass{background-color:#434063}
.ha_bor{border:0px #434063 solid;}
.btnwidth{width:150px; outline: none; }
</style>
<script language="javascript">
function change(color){
var el=event.srcElement
if (el.tagName=="INPUT"&&el.type=="button")
event.srcElement.style.backgroundColor=color;
}
</script>

Answer 1

<input id="btn" type="button" value="点击按钮" />

<script language="javascript" src="Scripts/jquery-1.4.1.min.js"></script>

<script language="javascript">

$(function () {

$("#btn").hover(function () { $(this).css("background-color", "Yellow"); }, function () { $(this).css("background-color", "red"); });

$("#btn").click(function () {

$(this).css("background-color", "Gray");

});

});

</script>