點選導航欄使當前欄目背景變色

antzone發表於2018-05-28

很多導航選單為提高辨識度，會在點選的導航欄施加一些特別的樣式。

最為常見的是背景變色效果，下面介紹一下如何利用jQuery實現此效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#box li{
  width:100px;
  height:30px;
  text-align:center;
  line-height:30px;
  list-style:none;
  float:left;
  margin-left:5px;
  background-color:#F60;
}
#box li a{
  display:block;
  text-decoration:none;
  color:#000;
}
#box .hover{background-color:#60C;}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">  
$(document).ready(function(){ 
  $("#box li").click(function(){ 
    $(this).addClass("hover").siblings().removeClass("hover"); 
  }); 
}); 
</script>  
</head> 
<body>
<ul id="box" style="overflow:hidden">
  <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>
  <li><a href="#">螞蟻部落六</a></li>
</ul> 
</body> 
</html>

當前點選的導航欄設定為指定顏色，其他的導航欄目背景色則恢復原樣，下面介紹一下它的實現過程。

一.實現原理：

原理非常簡單，為每一個li元素註冊click事件處理函式，此函式可以為點選的li新增樣式類hover，然後將它的兄弟li元素上新增的hover刪除，這樣就實現了保證只有一個li元素會被設定為特別背景色。

二.相關閱讀：

（1）.click事件參閱jQuery click事件一章節。

（2）.addClass()方法參閱jQuery addClass()一章節。

（3）.siblings()方法參閱jQuery siblings()一章節。

（4）.removeClass()方法參閱jQuery removeClass()一章節。

相關文章