效果:点击第一颗星星第一颗背景变;点击第二颗前两客变;以此类推。
head部分:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } li { width: 27px; height: 27px; background: url('star.gif'); float: left; margin: 10px; list-style: none; } .active { background-position: 0 -30px; } </style> </head>
文档部分:
<body> <ul id="ul"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
JS部分:
<script> window.onload = function () { var oUL = document.getElementById("ul"); var arrLi = oUL.getElementsByTagName("li"); for (var i = 0; i < arrLi.length; i = i + 1) { arrLi[i].index = i; arrLi[i].onclick = abc } function abc() { // alert(i) for (var j = 0; j < arrLi.length; j++) { arrLi[j].className = ""; } // alert(this.index); for (var j = 0; j <= this.index; j = j + 1) { arrLi[j].className = "active" } } } </script> </body> </html>