<!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 type="text/css">
div{
600px;
height: 100px;
border: 1px solid gray;
}
p{
float: left;
60px;
height: 60px;
background-color: #ccc;
margin-right: 10px;
border-radius: 50%;
}
</style>
<script type="text/javascript">
window.onload=function(){
var Ops=document.getElementById('box1').getElementsByTagName('p');
var biaoti=document.getElementById('biaoti');
for(var i = 0;i < Ops.length;i++){
Ops[i].index = i;
Ops[i].onclick = function(){
//点击后才执行这里的代码
//第一件事：让所有人(包括自己)都变灰色
for(var j = 0;j < Ops.length;j++){
Ops[j].style.backgroundColor = "#ccc";
}
//第二件事：让自己变红色
this.style.backgroundColor = "greenyellow";
//第三件事：让h1里面xcg的内容变为自己的编号
biaoti.innerHTML = this.index;
}
}
}
</script>
</head>
<body>
<h1 id="biaoti">哈哈</h1>
<div id="box1">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</body>
</html>