jQuery連結點選變色 點選其他還原

admin發表於2017-11-01
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{
  width:700px;
  overflow:hidden;
}
#box li{
  width:120px;
  float:left;
  margin-left:5px;
  height:25px;
  font-size:12px;
  text-align:center;
  list-style:none;
  line-height:25px;
  cursor:pointer;
}
.bg{
  background:#ccc;
}
.newbg{
  background:#639;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
  var lis=$("#box li");
  lis.click(function(){
    lis.each(function(){
      $(this).removeClass("newbg");
    })
    $(this).addClass("newbg");
  })
})
</script>
</head>
<body>
<ul id="box">
  <li class="bg"><a>螞蟻部落一</a></li>
  <li class="bg"><a>螞蟻部落二</a></li>
  <li class="bg"><a>螞蟻部落三</a></li>
  <li class="bg"><a>螞蟻部落四</a></li>
  <li class="bg"><a>螞蟻部落五</a></li>
</ul>
</body>
</html>

以上程式碼實現了我們的要求，程式碼非常的簡單，就是當點選li元素的時候，能夠首先遍歷所有的li元素，並將所有的newbg樣式類刪除，並將當前點選的li元素新增newbg樣式類，於是我們想要的效果就實現了。

相關文章