1、为li标签添加index属性，这个属性正好就是span标签数组的index值
2、函数封装适合页面有多个tab切换，需要注意的在获取的li标签和span标签对象时，必须将对应div对象作为参数传入
li标签添加index属性
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title></title> ???<style> ???????* { ???????????padding: 0; ???????????margin: 0; ???????} ???????.box1 { ???????????width: 500px; ???????????height: 400px; ???????????border: 1px solid #b6ff00; ???????????overflow: hidden; ???????????margin: 100px auto; ???????} ???????ul { ???????????width: 510px; ???????????height: 40px; ???????????list-style: none; ???????} ???????li { ???????????float: left; ???????????width: 101px; ???????????height: 40px; ???????????text-align: center; ???????????font: 400 15px/40px "simsun"; ???????????background-color: beige; ???????????cursor: pointer; ???????} ???????span { ???????????display: none; ???????????width: 500px; ???????????height: 360px; ???????????background-color: #ffd800; ???????????text-align: center; ???????????font: 700 150px/360px "simsun"; ???????} ???????.current { ???????????background-color: #ffd800; ???????} ???????.show { ???????????display: block; ???????} ???</style></head><body> ???<div class="box1"> ???????<ul> ???????????<li>鞋子</li> ???????????<li>上衣</li> ???????????<li>下装</li> ???????????<li>棉衣</li> ???????????<li>夏装</li> ???????</ul> ???????<span>鞋子</span> ???????<span>上衣</span> ???????<span>下装</span> ???????<span>棉衣</span> ???????<span>夏装</span> ???</div> ???<script> ???????var lis = document.getElementsByTagName("li"); ???????var sps = document.getElementsByTagName("span"); ???????for (var i = 0; i < lis.length; i++) { ???????????lis[i].index = i; ???????????lis[i].onmouseover = function () { ???????????????for (var j = 0; j < lis.length; j++) { ???????????????????lis[j].className = ""; ???????????????????sps[j].className = ""; ???????????????} ???????????????this.className = "current"; ???????????????sps[this.index].className = "show"; ???????????} ???????} ???</script></body></html>函数封装版本
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title></title> ???<style> ???????* { ???????????padding: 0; ???????????margin: 0; ???????} ???????.box { ???????????width: 500px; ???????????height: 400px; ???????????border: 1px solid #b6ff00; ???????????overflow: hidden; ???????????margin: 100px auto; ???????} ???????ul { ???????????width: 510px; ???????????height: 40px; ???????????list-style: none; ???????} ???????li { ???????????float: left; ???????????width: 101px; ???????????height: 40px; ???????????text-align: center; ???????????font: 400 15px/40px "simsun"; ???????????background-color: beige; ???????????cursor: pointer; ???????} ???????span { ???????????display: none; ???????????width: 500px; ???????????height: 360px; ???????????background-color: #ffd800; ???????????text-align: center; ???????????font: 700 150px/360px "simsun"; ???????} ???????.current { ???????????background-color: #ffd800; ???????} ???????.show { ???????????display: block; ???????} ???</style></head><body> ???<div class="box"> ???????<ul> ???????????<li>鞋子</li> ???????????<li>上衣</li> ???????????<li>下装</li> ???????????<li>棉衣</li> ???????????<li>夏装</li> ???????</ul> ???????<span>鞋子</span> ???????<span>上衣</span> ???????<span>下装</span> ???????<span>棉衣</span> ???????<span>夏装</span> ???</div> ???<div class="box"> ???????<ul> ???????????<li>鞋子</li> ???????????<li>上衣</li> ???????????<li>下装</li> ???????????<li>棉衣</li> ???????????<li>夏装</li> ???????</ul> ???????<span>鞋子</span> ???????<span>上衣</span> ???????<span>下装</span> ???????<span>棉衣</span> ???????<span>夏装</span> ???</div> ???<div class="box"> ???????<ul> ???????????<li>鞋子</li> ???????????<li>上衣</li> ???????????<li>下装</li> ???????????<li>棉衣</li> ???????????<li>夏装</li> ???????</ul> ???????<span>鞋子</span> ???????<span>上衣</span> ???????<span>下装</span> ???????<span>棉衣</span> ???????<span>夏装</span> ???</div> ???<script> ???????var boxs = document.getElementsByClassName("box"); ???????for (var i = 0; i < boxs.length; i++) { ???????????tabSwitch(boxs[i]); ???????} ???????function tabSwitch(ele) { ???????????var lis = ele.getElementsByTagName("li"); ???????????var sps = ele.getElementsByTagName("span"); ???????????for (var i = 0; i < lis.length; i++) { ???????????????lis[i].index = i; ???????????????lis[i].onmouseover = function () { ???????????????????for (var j = 0; j < lis.length; j++) { ???????????????????????lis[j].className = ""; ???????????????????????sps[j].className = ""; ???????????????????} ???????????????????this.className = "current"; ???????????????????sps[this.index].className = "show"; ???????????????} ???????????} ???????} ??????????</script></body></html>JS——tab函数封装
原文地址：http://www.cnblogs.com/wuqiuxue/p/7878680.html