js点击当前链接背景变色其他链接恢复原来背景色_js 改变style url,再点击恢复-优快云博客

可能大家都见过这样的效果，点击一个链接背景会变色，当再点击其他链接的时候，之前被点击的链接背景颜色又会恢复。下面就通过代码实例介绍一下如何实现此效果。

代码如下:

[HTML] 纯文本查看 复制代码运行代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48 <!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>