js点击当前链接背景变色其他链接恢复原来背景色

最新推荐文章于 2023-06-05 13:38:47 发布

翻译最新推荐文章于 2023-06-05 13:38:47 发布 · 2.4k 阅读

收录于

前端js 同时被 2 个专栏收录

39 篇文章

订阅专栏

效果

13 篇文章

订阅专栏

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

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

代码如下:

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