这个问题刚开始的时候挺纠结的，怎么从getelementsByTagName（）获得，用index和this即可做到，还有的应用到数组的遍历具体看下面的代码吧！
HTML和js代码
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>TAB切换</title> ???<link href="css/tab.css" rel="stylesheet"></head><body><div class="div_bg"> ???<ul id="bg"> ???????<li id="bg1" class="nobg" onmouseover="tab()"><a class="white">小说</a></li> ???????<li id="bg2" class="nobg" onmouseover="tab()"><a class="white">非小说</a></li> ???????<li id="bg3" class="nobg"><a class="white">少儿</a></li> ???</ul> ???<div id="book1"> ???????<a href="#" target=_blank>1.时间旅行者的妻子</a><br> ???????<a href="#" target=_blank>2.女心理师（下）</a><br> ???????<a href="#" target=_blank>3.鬼吹灯之精绝古城</a><br> ???????<a href="#" target=_blank>4.女心理师（上）</a><br> ???????<a href="#" target=_blank>5.小时候</a><br> ???????<a href="#" target=_blank>6.追风筝的人</a><br> ???????<a href="#" target=_blank>7.盗墓笔记2</a><br> ???????<a href="#" target=_blank>8.输赢</a> ???</div> ???<div id="book2"> ???????<a href="#" target=_blank>1.人生若只如初见</a><br> ???????<a href="#" target=_blank>2.高效能人士的七个..</a><br> ???????<a href="#" target=_blank>3.求医不如求己</a><br> ???????<a href="#" target=_blank>4.人体使用手册</a><br> ???????<a href="#" target=_blank>5.孩子，把你的手给我</a><br> ???????<a href="#" target=_blank>6.别笑！我是英文单词书</a><br> ???????<a href="#" target=_blank>7.人体经络使用手册</a><br> ???????<a href="#" target=_blank>8.股市稳赚</a> ???</div> ???<div id="book3"> ???????<a href="#" target=_blank>1.斯凯瑞金色童书?..</a><br> ???????<a href="#" target=_blank>2.哈利?波特与“混..</a><br> ???????<a href="#" target=_blank>3.不一样的卡梅拉（..</a><br> ???????<a href="#" target=_blank>4.它们是怎么来的</a><br> ???????<a href="#" target=_blank>5.五?三班的坏小子..</a><br> ???????<a href="#" target=_blank>6.男生日记</a><br> ???????<a href="#" target=_blank>7.哈利?波特与魔法石</a><br> ???????<a href="#" target=_blank>8.噼里啪啦丛书(全7册)</a> ???</div></div></body><script type="text/javascript"> ???window.onload=function(){ ???????????var ?list = document.getElementsByTagName("li"); ???????????for(var i=0;i<list.length;i++){ ???????????????list[i].index=i; ???????????????list[i].onmousemove=function(){
//获得当前元素的下表 ???????????????????var index = this.index;
//给每一个元素恢复原始 ???????????????????for(var i=0;i<3;i++){ ???????????????????????document.getElementById("bg"+(i+1)).className="nobg"; ???????????????????????document.getElementById("book"+(i+1)).style.display="none"; ???????????????????}
//对选择的元素添加样式 ???????????????????document.getElementById("bg"+(index+1)).className="bg"; ???????????????????document.getElementById("book"+(index+1)).style.display="block"; ???????????????} ???????????} ???????}</script></html>css代码
*{ ???margin:0; ???padding: 0; ???font-family: "Arial", "微软雅黑"; ???font-size: 12px; ???line-height: 23px;}ul,li{list-style: none;}li{float: left; margin-right: 1px;}.div_bg{ ???background-image:url(../images/bg.jpg); ???background-repeat:no-repeat; ???width:169px; ???height:290px; ???margin-top: 0px; ???margin-right: auto; ???margin-bottom: 0px; ???margin-left: auto; ???padding: 50px 0 0 15px; ???position: relative;}.div_bg div{ ???clear: both; padding-top: 10px;}.white{font-size:12px; ???color:#FFFFFF; ???padding-top:2px; ???cursor:pointer;}.white:hover{font-size:12px; ???color:#FFFFFF; ???padding-top:2px; ???cursor:pointer;}a { ???color: #06329b;text-decoration: none;line-height:24px;}a:hover { ???color: #cc0000;text-decoration: none;line-height:24px;}.bg{background-image:url(../images/menu1.gif); ???background-repeat:no-repeat; ???height:23px; ???width:47px; ???text-align:center;}.nobg{background-image:url(../images/menu2.gif); ???background-repeat:no-repeat; ???height:23px; ???width:47px; ???text-align:center;}#book2,#book3{ ???display: none;}.div_bg div{ ???position: absolute; ???top: 80px;}tab切换 ?js制作 ?index和this的应用
原文地址：http://www.cnblogs.com/binglong180/p/7770657.html