點選當前文字行實現文字變色效果

antzone發表於2017-03-18

本章節介紹一下如何實現點選當前行能夠實現文字變色效果，並且能夠進行切換。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
ul{
  width:300px;
  list-style:none;
  font-size:12px;
}
ul{cursor:pointer}
.red{color:red;} 
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("li").click(function(){ 
    $(this).toggleClass("red"); 
  }) 
})
</script> 
</head> 
<body> 
<ul>
  <li>螞蟻部落歡迎您</li>
  <li>只有努力奮鬥，才會有美好的明天。</li>
  <li>沒有人一開始就是高手</li>
  <li>每一天都是新的，要好好珍惜</li>
  <li>當前才是最珍貴的，下一秒都是不切實際的</li>
</ul>
</body> 
</html>

上面的程式碼實現我們想要的效果，點選li的時候，能夠實現當然文字變色效果，再點選一次又可以恢復到原來的顏色，這裡是使用toggleClass()函式實現的，具體可以參閱jQuery toggleClass()一章節。

相關文章