| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Title</title> | |
| <style> | |
| *{margin: 0; | |
| padding: 0;} | |
| .div1{ | |
| width: 200px; | |
| height: 100px; | |
| border: 3px solid ; | |
| margin: 100px auto;} | |
| li{list-style: none; | |
| width: 28px; | |
| height: 28px; | |
| float: left; | |
| margin: 30px auto; | |
| background-image: url("12.gif"); | |
| background-position: 0px 0px;} | |
| .a{ | |
| background-position: 0px -30px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="div1"> | |
| <ul id="ul1"> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| </ul> | |
| </div> | |
| <script> | |
| var li1=document.getElementsByTagName("li"); | |
| for( var x=0; x<li1.length; x=x+1) { | |
| li1[x].index = x; | |
| li1[x].onclick = function (){ | |
| for (j = 0; j < li1.length; j = j + 1) { | |
| li1[j].className = "" | |
| } | |
| for (j = 0; j < this.index + 1; j = j + 1) { | |
| li1[j].className = "a" | |
| } | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
五星好评
猜你喜欢
转载自blog.csdn.net/weixin_42413689/article/details/80848685
今日推荐
周排行