tab Toggle JS making the application of index and this

This problem at the beginning of a very tangled, how to get from getElementsByTagName (), with the index and this can be done, there are some applications to the array of traversal specific look at the following code it!

HTML and JS code

<! DOCTYPE Html>"en"> <meta charset="UTF-8"> <title>tab Toggle </title> <link href="Css/tab.css"Rel="stylesheet">class="DIV_BG"> <ul id="BG"> <li id="bg1" class="NOBG"Onmouseover="tab ()"><aclass=" White"> Fiction </a></li> <li id="Bg2" class="NOBG"Onmouseover="tab ()"><aclass=" White"> Non fiction </a></li> <li id="Bg3" class="NOBG"><aclass=" White"> Children </a></li> </ul> <div id="Book1"> <a href="#"Target=_blank>1. Time Traveler's wife </a><br> <a href="#"Target=_blank>2. Female psychologist (under) </a><br> <a href="#"Target=_blank>3Ghost blows Ancient town </a><br> <a href="#"Target=_blank>4. Female psychologist (upper) </a><br> <a href="#"Target=_blank>5. Childhood </a><br> <a href="#"Target=_blank>6. Kite-Chasing </a><br> <a href="#"Target=_blank>7. Tomb Raider Note 2</a><br> <a href="#"Target=_blank>8. Win </a> lose </div> <div id="Book2"> <a href="#"Target=_blank>1If life is just like the beginning </a><br> <a href="#"Target=_blank>2Seven of highly effective people. </a><br> <a href="#"Target=_blank>3. Seek for yourself </a><br> <a href="#"Target=_blank>4Human manuals </a><br> <a href="#"Target=_blank>5Give me your hand, child. </a><br> <a href="#"Target=_blank>6. Don't laugh! I am an English word book </a><br> <a href="#"Target=_blank>7Manual of Human meridians </a><br> <a href="#"Target=_blank>8Stock market Profit </a> </div> <div id="BOOK3"> <a href="#"Target=_blank>1. Skerry Golden Children's book?.. </a><br> <a href="#"Target=_blank>2. Harry Potter and the "mixed." </a><br> <a href="#"Target=_blank>3. Not the same Carmela (.. </a><br> <a href="#"Target=_blank>4. How did they get here </a><br> <a href="#"Target=_blank>5. Five. Bad boy in class three. </a><br> <a href="#"Target=_blank>6. Boys Diaries </a><br> <a href="#"Target=_blank>7. Harry Potter and the Philosopher's Stone </a><br> <a href="#"Target=_blank>8. Crackling books (all 7 volumes) </a> </div></div></body><script type="Text/javascript">window.onload=function () {varList = document.getElementsByTagName ("Li");  for(varI=0; i<list.length;i++) {List[i].index=i; List[i].onmousemove=function () {
Get the following table for the current elementvarindex = This. Index;
Restore the original to each of the elements for(varI=0;i<3; i++) {document.getElementById ("BG"+ (i+1). classname="NOBG"; document.getElementById (" Book"+ (i+1). style.display="None"; }
Adds a style to the selected element document.getElementById ("BG"+ (index+1). classname="BG"; document.getElementById (" Book"+ (index+1). style.display="Block"; }            }        }</script>

CSS Code

*{margin:0;padding:0;font-family:"Arial", "Microsoft Jas Black";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 Toggle JS making the application of index and this