隔行变色:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <title>Nearth</title> <script src="jquery-1.12.2.js"></script> <style type="text/css"> ul{ list-style-type: none; width:200px; position: absolute; left:500px; } ul li{ margin-top:10px; cursor: pointer; text-align: center; font-size: 30px; } </style> <script> $(function(){ $("#btn").click(function(){ $("#uu>li:even").css("backgroundColor","red"); $("#uu>li:odd").css("backgroundColor","pink"); }) }) </script> </head> <body> <h1>隔行变色</h1> <hr > <input type="button" name="" id="btn" value="点击我,显示效果" /> <ul id="uu"> <li>西施1号</li> <li>西施2号</li> <li>西施3号</li> <li>西施4号</li> <li>西施5号</li> <li>西施6号</li> <li>西施7号</li> <li>西施8号</li> </ul> </body> </html>