js點選當前連結背景變色其他連結恢復原來背景色

admin發表於2017-04-17
JS

可能大家都見過這樣的效果，點選一個連結背景會變色，當再點選其他連結的時候，之前被點選的連結背景顏色又會恢復。下面就通過程式碼例項介紹一下如何實現此效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

相關文章