<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
.weiyi{ /*得到这个类名，它的按钮的背景颜色是粉色*/
background-color: pink;
}
</style>
<!--js部分，鼠标点击任何一个按钮时，只有这个按钮的背景颜色变成粉色，其他按钮的颜色都不会改变-->
<script>
window.onload=function() {
var btns = document.getElementsByTagName("button"); //先得到所有按钮
for(var i=0;i<btns.length;i++)
{
btns[i].onclick=function() //鼠标点击到按钮的时候
{
alert(this.index);
for(var j=0;j<btns.length;j++)
{
btns[j].className=""; //先干掉所有人包括我自己，让所有按钮都是空
}
this.className="weiyi"; //然后只剩下我自己，类名为"weiyi"，按钮颜色是粉色
}
}
}
</script>
</head>
<body>
<!--有十个按钮-->
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
</body>
</html>
