點選導航欄切換背景色效果

admin發表於2018-12-11

本章節分享一段簡單的程式碼例項，它實現了點選導航欄切換背景顏色效果。

程式碼例項如下: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style>
*{ 
  margin:0; 
  padding:0; 
  border:0px; 
  list-style:none; 
  margin:0 auto;
}
*a{ 
  text-decoration:none; 
  color:#FFF;
}
ul{ 
  width:800px; 
  height:30px; 
  background-color:#C33;
}
ul li{ 
  float:left; 
  width:160px; 
  height:30px; 
  line-height:30px; 
  text-align:center; 
  color:#FFFFFF;
}
ul li a{ 
  color:#FFFFFF; 
  display:block; 
  width:160px; 
  height:30px; 
  text-decoration:none;
}
.first{background-color:#0000FF;}
ul li a:hover{
  color:#FFF; 
  display:block; 
  width:160px; 
  height:30px; 
  text-decoration:underline; 
  background-color:#03F;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
<script language="javascript" type="text/javascript">
$(document).ready(function (){
  $("li").each(function(index){
    $(this).click(function(){ 
      $("li").removeClass("first");
      $("li").eq(index).addClass("first");
    });
  });
});
</script>
</head>
<body>
<ul>
  <li class="first"><a href="#">首頁</a></li>
  <li><a href="#">div教程</a></li>
  <li><a href="#">css教程</a></li>
  <li><a href="#">js教程</a></li>
  <li><a href="#">螞蟻部落</a></li>
</ul>
</body>
</html>

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

一.程式碼註釋:

（1）.$(document).ready(function (){})，當文件結構完全載入完畢再去執行函式中的程式碼。

（2）.$("li").each(function(index){})，遍歷每一個li元素。

（3）.$(this).click(function(){})，為當前li元素註冊click事件處理函式。

（4）.$("li").removeClass("first")，移除li元素上的first樣式類。

（5）.$("li").eq(index).addClass("first")，為當前li元素新增first樣式類。

二.相關閱讀:

（1）.each()方法可以參閱jQuery each()一章節。

（2）.removeClass()可以參閱jQuery removeClass()一章節。

（3）.eq()可以參閱jQuery eq()一章節。

（4）.addClass()可以參閱jQuery addClass()一章節。

相關文章