點選連結背景變色效果

admin發表於2018-09-08

為了辨識度更高，最簡單的方式就是將當前點選的連結背景設定的與其他不同，當再點選其他連結的時候，又會將背景色還原，下面就通過程式碼例項介紹一下如何實現此效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<style type="text/css">
#dNavBar{
  background-color:#ffffff;
}
#dNavBar li{
  list-style-type:none;
  float:left;
  width:84px;
  height:28px;
  line-height:28px;
  font-size:12px;
  color:#FFFFFF;
  border:1px solid #ffffff;
  background:#86C2FF;
  text-align:center;
  display:block;
  cursor:pointer;
}
body{margin:0px;}
#dNavBar .nav{
  border-bottom:0px solid #666688;
  background:#99cc66;
  height:28px;
}
a:link,a:visited{
  color:#FFFFFF;
  text-decoration:none;
}
a:hover{
  color:#FFFFFF;
  text-decoration:none;
}
</style>
<script>
function ShowMenu(){
  var barCTT=document.getElementById("dNavBar")
  var liArr=barCTT.getElementsByTagName("li")
   
  for (var index=0;index<liArr.length;index++){
    liArr[index].onclick=function(){
      selectThis(this,liArr)
    }
  }
}
 
function selectThis(indexObj,allLi){
  for (y=0;y<allLi.length;y++){
    allLi[y].style.border="1px solid #ffffff";
    allLi[y].style.backgroundColor="#86C2FF";
    allLi[y].style.height="28px";
  }
  indexObj.style.borderBottom="0px solid #666688";
  indexObj.style.backgroundColor="#99cc66";
  indexObj.style.height="31px";
}
window.onload=function(){
  ShowMenu()
}
</script>
<body>
<div id="dNavBar" style="float:none;width:560px;">
  <li class="nav">首頁</li>
  <li>前端專區</li>
  <li>下載專區</li>
  <li>seo專區</li>
</div>
</body>
</html>

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

一.程式碼註釋:

（1）.function ShowMenu(){}，此方法為每一個導航專案註冊onclick事件處理函式。

（2）.var barCTT=document.getElementById("dNavBar")，獲取id屬性值為dNavBar元素物件。

（3）.var liArr=barCTT.getElementsByTagName("li")，獲取dNavBar元素下的li元素集合。

（4）.for (var index=0;index<liArr.length;index++){

  liArr[index].onclick=function(){

    selectThis(this,liArr)

  }

}遍歷每一個li元素，然後為其註冊onclick事件處理函式。

（5）.function selectThis(indexObj,allLi){}，可以實現將所有的li元素統一設定為預設樣式，然後再將當前li元素單獨設定為一種樣式，第一個引數是當前的li元素物件，第二個引數是li元素集合。

（6）.for (y=0;y<allLi.length;y++){

  allLi[y].style.border="1px solid #ffffff";

  allLi[y].style.backgroundColor="#86C2FF";

  allLi[y].style.height="28px";

}，遍歷每一個li元素，然後統一設定樣式。

（7）.indexObj.style.borderBottom="0px solid #666688";

indexObj.style.backgroundColor="#99cc66";

indexObj.style.height="31px";

單獨為當前元素設定樣式。

二.相關閱讀:

（1）.document.getElementById()參閱document.getElementById()一章節。

（2）.getElementsByTagName()參閱JavaScript getElementsByTagName()一章節。

（3）.style參閱JavaScript style 屬性一章節。

相關文章