一个页面显示多组Tab菜单

<script language=javascript type=text/javascript> var currentId = 1; var divtop={0:"divtop1",1:"divtop2",2:"divtop3",3:"divtop4"} var divct={0:"divct1",1:"divct2",2:"divct3",3:"divct4"} function changebg(i,id){ //document.getElementById(divtop[i]+currentId).classname=""; document.getElementById(divct[i]+currentId).style.display="none"; //document.getElementById(divtop[i]+id).classname=""; document.getElementById(divct[i]+id).style.display=""; currentId=id; } </script>

代码如下：

<! 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=gb2312"   />
< title > 无标题文档 </ title >
< style  type ="text/css" > ...
#zgkyy {...}{
    width: 500px;
    padding-top: 5px;
    padding-right: 20px;
    padding-bottom: 5px;
    padding-left: 10px;
    float: left;
    color: #02700A;
}
/**//*利用padding:20px 20px 0 0来固定菜单位置*/
#zgkyy ul {...}{
    float:left;
    list-style:none;
    margin:5px;
    width: 500px;
    padding: 5px;
    height: 40px;
}
/**//*添加了float:right使得菜单位于页面右侧*/
#zgkyy ul li {...}{
    float:left;
    margin:0 3px;
    display:block;
    line-height:12px;
    color: #02700A;
    font-size: 12px;
}


#nrzx0{...}{
    float:left;
    width:699px;
    height:50px;
    line-height: 20px;
    text-decoration: none;
    font-size: 12px;
    line-height: 20px;
    color: #000000;
    
    margin: 5px;
    display:inline;
}
</ style >
< SCRIPT  language =javascript   type =text/javascript > ...
var currentId = 1;
var divtop=...{0:"divtop1",1:"divtop2",2:"divtop3",3:"divtop4"}
var divct=...{0:"divct1",1:"divct2",2:"divct3",3:"divct4"}
function changebg(i,id)...{
    //document.getElementById(divtop[i]+currentId).classname="";
    document.getElementById(divct[i]+currentId).style.display="none";

    //document.getElementById(divtop[i]+id).classname="";
    document.getElementById(divct[i]+id).style.display="";
    
    currentId=id;
}
</ SCRIPT >
</ head >

< body >
<!--  firststart  -->
< div  id ="nrz" >
   < div  id ="zgkyy" >
             < ul >
                 < li  id ="divtop11"  onmouseover ="javascript:changebg(0,1);" >< a  href ="http://gaokao.ewstudy.com/dylzfx/index.html"  target ="_blank" > 第一轮复习1 </ a ></ li >
                 < li  id ="divtop12"  onmouseover ="javascript:changebg(0,2);"  onmouseout ="javascript:changebg(0,1);" >< a  href ="http://gaokao.ewstudy.com/elzttp/index.html"  target ="_blank" > 二轮强化1 </ a ></ li >
                 < li  id ="divtop13"  onmouseover ="javascript:changebg(0,3);"  onmouseout ="javascript:changebg(0,1);" >< a  href ="http://gaokao.ewstudy.com/slytcc/index.html"  target ="_blank" > 模拟冲刺1 </ a ></ li >
                 < li  id ="divtop14"  onmouseover ="javascript:changebg(0,4);"  onmouseout ="javascript:changebg(0,1);" >< a  href ="http://gaokao.ewstudy.com/xtfx/index.html"  target ="_blank" > 高考练习1 </ a ></ li >
                 < li  id ="divtop15"  onmouseover ="javascript:changebg(0,5);"  onmouseout ="javascript:changebg(0,1);" >< a  href ="http://gaokao.ewstudy.com/tlky/index.html"  target ="_blank" > 听力口语1 </ a ></ li >
             </ ul >
   </ div >
            
</ div >
             < div  id ="nrzx" >
                 < div  id ="nrzx0" >
                 < DIV  id ="divct11"  style ="display: ''" > 高考第一轮总复习1 </ DIV >
                 < DIV  id ="divct12"  style ="display: none" > 二轮强化1 </ DIV >
                 < DIV  id ="divct13"  style ="display: none" > 模拟冲刺1 </ DIV >
                 < DIV  id ="divct14"  style ="display: none" > 高考练习1 </ DIV >
                 < DIV  id ="divct15"  style ="display: none" > 听力口语1 </ span ></ DIV >
                 </ div >
            
             </ div >
<!--  firstend  -->
<!--  secondstart  -->             
< div  id ="nrz" >
   < div  id ="zgkyy" >
             < ul >
                 < li  id ="divtop21"  onmouseover ="javascript:changebg(1,1);" >< a  href ="http://gaokao.ewstudy.com/dylzfx/index.html"  target ="_blank" > 第一轮复习2 </ a ></ li >
                 < li  id ="divtop22"  onmouseover ="javascript:changebg(1,2);"  onmouseout ="javascript:changebg(1,1);" >< a  href ="http://gaokao.ewstudy.com/elzttp/index.html"  target ="_blank" > 二轮强化2 </ a ></ li >
                 < li  id ="divtop23"  onmouseover ="javascript:changebg(1,3);"  onmouseout ="javascript:changebg(1,1);" >< a  href ="http://gaokao.ewstudy.com/slytcc/index.html"  target ="_blank" > 模拟冲刺2 </ a ></ li >
                 < li  id ="divtop24"  onmouseover ="javascript:changebg(1,4);"  onmouseout ="javascript:changebg(1,1);" >< a  href ="http://gaokao.ewstudy.com/xtfx/index.html"  target ="_blank" > 高考练习2 </ a ></ li >
                 < li  id ="divtop25"  onmouseover ="javascript:changebg(1,5);"  onmouseout ="javascript:changebg(1,1);" >< a  href ="http://gaokao.ewstudy.com/tlky/index.html"  target ="_blank" > 听力口语2 </ a ></ li >
             </ ul >
   </ div >
            
</ div >

             < div  id ="nrzx" >
                 < div  id ="nrzx0" >
                 < DIV  id ="divct21"  style ="display: ''" > 高考第一轮总复习2 </ DIV >
                 < DIV  id ="divct22"  style ="display: none" > 二轮强化2 </ DIV >
                 < DIV  id ="divct23"  style ="display: none" > 模拟冲刺2 </ DIV >
                 < DIV  id ="divct24"  style ="display: none" > 高考练习2 </ DIV >
                 < DIV  id ="divct25"  style ="display: none" > 听力口语2 </ span ></ DIV >
                 </ div >
            
             </ div >         
        
<!--  secondend  -->     
     <!--  thirdstart  -->             
< div  id ="nrz" >
   < div  id ="zgkyy" >
             < ul >
                 < li  id ="divtop31"  onmouseover ="javascript:changebg(2,1);" >< a  href ="http://gaokao.ewstudy.com/dylzfx/index.html"  target ="_blank" > 第一轮复习3 </ a ></ li >
                 < li  id ="divtop32"  onmouseover ="javascript:changebg(2,2);"  onmouseout ="javascript:changebg(2,1);" >< a  href ="http://gaokao.ewstudy.com/elzttp/index.html"  target ="_blank" > 二轮强化3 </ a ></ li >
                 < li  id ="divtop33"  onmouseover ="javascript:changebg(2,3);"  onmouseout ="javascript:changebg(2,1);" >< a  href ="http://gaokao.ewstudy.com/slytcc/index.html"  target ="_blank" > 模拟冲刺3 </ a ></ li >
                 < li  id ="divtop34"  onmouseover ="javascript:changebg(2,4);"  onmouseout ="javascript:changebg(2,1);" >< a  href ="http://gaokao.ewstudy.com/xtfx/index.html"  target ="_blank" > 高考练习3 </ a ></ li >
                 < li  id ="divtop35"  onmouseover ="javascript:changebg(2,5);"  onmouseout ="javascript:changebg(2,1);" >< a  href ="http://gaokao.ewstudy.com/tlky/index.html"  target ="_blank" > 听力口语3 </ a ></ li >
             </ ul >
   </ div >
            
</ div >

             < div  id ="nrzx" >
                 < div  id ="nrzx0" >
                 < DIV  id ="divct31"  style ="display: ''" > 高考第一轮总复习3 </ DIV >
                 < DIV  id ="divct32"  style ="display: none" > 二轮强化3 </ DIV >
                 < DIV  id ="divct33"  style ="display: none" > 模拟冲刺3 </ DIV >
                 < DIV  id ="divct34"  style ="display: none" > 高考练习3 </ DIV >
                 < DIV  id ="divct35"  style ="display: none" > 听力口语3 </ span ></ DIV >
                 </ div >
            
             </ div >
<!--  thirdend  -->                 
</ body >
</ html >