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

快乐打工仔 分类:实例代码

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

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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>

js点击当前链接背景变色其他链接恢复原来背景色,这样的场景在实际项目中还是用的比较多的,关于js点击当前链接背景变色其他链接恢复原来背景色就介绍到这了。

js点击当前链接背景变色其他链接恢复原来背景色属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容