<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>链接背景变色</title>
<style type="text/css">
ul{list-style:none;}
li,a{
width:150px;
height:30px;
text-align:center;
line-height:30px;
margin-bottom:10px;
background-color:#606;
color:white;
display:block;
}
a{text-decoration:none;}
</style>
<script type="text/javascript">
function changeCss(obj,lis){
for(var i=0;i<lis.length;i++){
lis[i].style.backgroundColor = "#606";
}
obj.style.backgroundColor="#F30";
}
window.onload=function(){
var box=document.getElementById("box");
alinks=box.getElementsByTagName("a");
for(var i=0;i<alinks.length;i++){
alinks[i].onclick=function(){
changeCss(this,alinks)
}
}
}
</script>
</head>
<body>
<ul id="box">
<li><a href="#">蚂蚁部落一</a></li>
<li><a href="#">蚂蚁部落二</a></li>
<li><a href="#">蚂蚁部落三</a></li>
<li><a href="#">蚂蚁部落四</a></li>
<li><a href="#">蚂蚁部落五</a></li>
</ul>
</body>
</html>
