js点击当前链接背景变色其他链接恢复原来背景色_js 点击链接单元格背景颜色变了-优快云博客

本文介绍了一个简单的网页效果：点击链接时背景色变化，再次点击其他链接时，之前的链接背景色恢复。通过HTML、CSS和JavaScript代码实现了这一效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

代码如下:

[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>