如何使用jQuery實現隔行變色效果:
隔行變色效果在網站有大量應用，尤其是在類似新聞列表這樣的功能，對於行與行之間的區分有很大的好處，也提高了網站的人性化程度，雖然是個小功能，但是網站的流量都是從這樣的小功能點點滴滴積累起來的。此效果可以使用CSS實現，但是由於現有瀏覽器對於CSS3支持度還不夠好，所以使用js或者jQuery是不錯的選擇，下面就介紹一下如何使用jQuery實現此種效果。代碼實例如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=" utf-8"> 5 <meta name="author" content="http://www.softwhy.com/" /> 6 <title>螞蟻部落</title> 7 <style type="text/css"> 8 ul{ 9 list-style:none; 10 } 11 </style> 12 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 13 <script type="text/javascript"> 14 $(document).ready(function () { 15 jQuery.changeColor = function (ulid) { 16 var liset = $(ulid).find("li"); 17 for (var i = 0; i < liset.length; i += 2) { 18 liset.eq(i).css("background-color", "green"); 19 } 20 } 21 $.changeColor("#mytest"); 22 }) 23 </script> 24 <body> 25 <ul id="mytest"> 26 <li>第一行</li> 27 <li>第二個行</li> 28 <li>隔行變色的LI</li> 29 <li>隔行變色的LI</li> 30 <li>隔行變色的LI</li> 31 </ul> 32 </body> 33 </html>
以上代碼可以將奇數行的背景顏色設置為綠色。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=5790
更多內容可以參閱:http://www.softwhy.com/jqshili/