js實現點選導航欄使當前背景變色程式碼

admin發表於2017-03-19
JS

不少的導航欄有這樣的效果，當點選導航欄的欄目的時候，能夠將當前改變當前欄目的背景色，並且同時只能有一個導航欄背景色是被修改的，這樣可以有效的提高導航欄的辨識度，下面就通過程式碼例項介紹一下如何實現此功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
body{font-size:17px;}
.current{background:red;}
#container ul{list-style-type:none;}
#container ul li{
  float:left;
  margin-right:10px;
  width:100px;
  height:30px;
}
#container ul li a{
  text-decoration:none;
  color:#000;
  display:block;
  width:100px;
  height:30px;
  text-align:center;
  line-height:30px;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var menu=document.getElementById("menu");
  var as=menu.getElementsByTagName("a");
   
  for(var i=0;i<as.length;i++){
    as[i].onclick=function(){
      for(var i=0;i<as.length;i++){
        as[i].className = "";
      }
      this.className="current";
    }
  }
}
</script>
</head>
<body>
<div id="container">
  <ul id="menu">
    <li><a href="javascript:" class="current">螞蟻部落一</a></li>
    <li><a href="javascript:">螞蟻部落二</a></li>
    <li><a href="javascript:">螞蟻部落三</a></li>
    <li><a href="javascript:">螞蟻部落四</a></li>
    <li><a href="javascript:">螞蟻部落五</a></li>
  </ul>
</div>
</body>
</html>

以上程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.實現原理:

首先獲取所有的連結a元素，然後通過for迴圈遍歷每一個元素，並且為它們註冊onclick事件處理函式，此函式一會遍歷每一個a元素，先將每一個元素的背景色還原，然後再將當前的點選的元素背景色設定為紅色，於是就實現了此效果。

二.相關閱讀:

1.document.getElementById()函式可以參閱document.getElementById()一章節。 

2.getElementsByTagName()函式可以參閱document.getElementsByTagName()一章節。

3.className可以參閱javascript className一章節。

相關文章