需求：在同个页面多处使用tab栏切换
知识点：函数的封装，for循环调用函数
<body> <div class="box"> <ul> <li class="current">鞋子</li> <li>袜子</li> <li>帽子</li> <li>裙子</li> <li>裤子</li> </ul> <span class="show">鞋子</span> <span>袜子</span> <span>帽子</span> <span>裙子</span> <span>裤子</span> </div> <div class="box"> <ul> <li class="current">鞋子</li> <li>袜子</li> <li>帽子</li> <li>裙子</li> <li>裤子</li> </ul> <span class="show">鞋子</span> <span>袜子</span> <span>帽子</span> <span>裙子</span> <span>裤子</span> </div> <script> //需求：鼠标放到上面的li上，li本身变色(添加类)，对应的span也显示出来(添加类) //思路：点亮盒子 利用索引值显示盒子 //获取事件源和相关元素 var boxArr = document.getElementsByClassName("box"); //函数调用 for (var i = 0; i < boxArr.length; i++) { fn(boxArr[i]); } //函数封装 function fn(ele){ var liArr = ele.getElementsByTagName("li"); var spanArr = ele.getElementsByTagName("span"); //绑定事件 for (var i = 0; i < liArr.length; i++) { //绑定索引值 liArr[i].setAttribute("index",i); liArr[i].onmouseover = function(){ //点亮盒子 利用索引值显示盒子 for (var j = 0; j < liArr.length; j++) { liArr[j].removeAttribute("class"); spanArr[j].removeAttribute("class"); } this.setAttribute("class","current"); spanArr[this.getAttribute("index")].setAttribute("class","show"); } } } </script> </body>