js代码
<script> window.onload = function () { var allLis = document.getElementsByTagName('li'); // 记录移动前选中li对应的索引 var preSelectLiIndex = 1; for(var i=0; i<allLis.length; i++){ (function (i) { var li = allLis[i]; li.onmouseover = function () { // 清除一开始 默认选中的li的样式 allLis[preSelectLiIndex].className = ''; // 设置 this.className = 'current'; // 赋值 preSelectLiIndex = i; } })(i); } } </script>html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> li{ border: 1px solid #000; background-color: #ccc; cursor: pointer; } .current{ background-color: orangered; } </style> </head> <body> <ul> <li ></li> <li class="current"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>