menus[i].index=i与mains[this.index]这个是虾米意思


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XYX</title>
<style type="text/css">
*{ margin:0; padding:0;}
#Tab_box{ width:400px; margin:30px auto;}
#Tab_box h2{ height:24px; line-height:24px; font-size:14px; background:#090;}
#Tab_box h2 span{ margin:0 15px; cursor:pointer;}
#Tab_box h2 span.current{ color:#fff;}
#Tab_box .main{ padding:10px; font-size:12px; display:none; background:#CCC;}
</style>
</head><body>
<div id="Tab_box">
<h2 id="Title"><span class="current">标题一</span><span>标题二</span><span>标题三</span></h2>
    <div id="wap">
     <div class="main" style="display:block;">内容一</div>
     <div class="main">内容二</div>
     <div class="main">内容三</div>
    </div>
</div>
<script type="text/javascript">
var menus=document.getElementById("Title").getElementsByTagName("span");
var mains=document.getElementById("wap").getElementsByTagName("div");
for(var i=0; i<menus.length; i++){
menus[i].index=i;
menus[i].onmouseover=mousevoer;
}
function mousevoer(){
for(var i=0; i<menus.length; i++){
menus[i].className="";
mains[i].style.display="none";
}
this.className='current';
mains[this.index].style.display="block";
}
</script>
</body>
</html>求人解释一下menus[i].index=i;与mains[this.index]是什么意思？还有如果一个页面中多次用到这个选项卡JS要怎么写？请教了。