js實現的點選連結<a>實現切換背景顏色

antzone發表於2017-03-15
JS

當點選連結的時候實現切換連結的背景色效果也是比較常見的，本章節只是簡單介紹一下如何實現此效果，至於美觀度就不至於那麼在意了，下面直接看程式碼:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
li{list-style:none}
a
{
  display:block;
  width:100px;
  height:30px;
  line-height:30px;
  text-align:center;
  background-color:#66F;
  margin-top:5px;
  text-decoration:none;
}
</style>
<script type="text/javascript"> 
window.onload=function()
{
  var oul=document.getElementById("box");
  var links=document.getElementsByTagName("a");
  for(var i=0;i<links.length;i++)
  {
    links[i].onclick=function()
    {
      for(var j=0;j<links.length;j++)
      {
        links[j].style.backgroundColor="#66F";
      }
      this.style.backgroundColor="red";
    }
  }
}
</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>

以上實現了我們的需求，實現原理很簡單，就是通過for迴圈遍歷所有的連結，並註冊事件處理函式，此事件處理函式可以先將連結顏色設定為紅色，然後再將當前點選的連結設定為藍色，這就實現只會將當前連結背景色設定為藍色效果。

相關文章