TAB切換效果

<! 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 > Untitled Document </ title >
< style > ...
BODY {...}{
    FONT-SIZE: 12px; MARGIN: 0px; COLOR: #000000; LINE-HEIGHT: 150%
}
IMG {...}{
    BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
FORM {...}{
    BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px; BORDER-RIGHT-WIDTH: 0px
}
TABLE {...}{
    TABLE-LAYOUT: fixed
}
TD {...}{
    MARGIN-LEFT: 0px; OVERFLOW: hidden; WHITE-SPACE: nowrap; LIST-STYLE-TYPE: none; TEXT-OVERFLOW: ellipsis
}
.qiehuan {...}{
    FLOAT: left; BORDER-BOTTOM: #ffa349 1px solid; HEIGHT: 24px
}
.qiehuan_on {...}{
    BACKGROUND: url("images2.files/I_NRQH_CURRENT.GIF") no-repeat; FLOAT: left; WIDTH: 64px; LINE-HEIGHT: 25px; HEIGHT: 25px; TEXT-ALIGN: center
}
.qiehuan_off {...}{
    BACKGROUND: url("images2.files/I_NRQH_GRAY.GIF") no-repeat; FLOAT: left; WIDTH: 64px; LINE-HEIGHT: 25px; HEIGHT: 25px; TEXT-ALIGN: center
}
A.qhaon {...}{
    COLOR: #ffffff; TEXT-DECORATION: none
}
A.qhaon:hover {...}{
    COLOR: #ffffff; TEXT-DECORATION: underline
}
A.qhaoff {...}{
    COLOR: #000000; TEXT-DECORATION: none
}
A.qhaoff:hover {...}{
    COLOR: #000000; TEXT-DECORATION: underline
}
</ style >

< script  language ="javascript" > ...
function Q_$(o)...{return window.top.document.getElementById(o)}    

var QieHuan_1 = "Shao1"; 
var QieHuan_2 = "YuYan1";
var QieHuan_3 = "ZhiYe1"; 
var QieHuan_4 = "IT1"; 
var QieHuan_5 = "XueLi1";
var QieHuan_6 = "Hot1"; 
var QieHuan_7 = "Member1"; 
var QieHuan_8 = "ZiLiao1"; 
var QieHuan_9 = "XinWen1"; 
function QieHuan(Tab,e)
...{
    var tID = e.id;
    var DefaultTab = eval("QieHuan_" + Tab);
    if (DefaultTab != tID)
    ...{
        var OFFCss = "qiehuan_off";
        var ONCss = "qiehuan_on";
        
        Q_$(DefaultTab).className = OFFCss;
        e.className = ONCss;
        if (Q_$(DefaultTab + "_a")) Q_$(DefaultTab + "_a").className = "qhaoff";
        if (Q_$(DefaultTab + "_Div")) Q_$(DefaultTab + "_Div").style.display = "none";
        if (Q_$(tID + "_a")) Q_$(tID + "_a").className = "qhaon";
        if (Q_$(tID + "_Div")) Q_$(tID + "_Div").style.display = "";
        switch(Tab)
        ...{
            case 1:
                QieHuan_1 = tID;
                break;
            case 2:
                QieHuan_2 = tID;
                break;
            case 3:
                QieHuan_3 = tID;
                break;
            case 4:
                QieHuan_4 = tID;
                break;
            case 5:
                QieHuan_5 = tID;
                break;
            case 6:
                QieHuan_6 = tID;
                break;
            case 7:
                QieHuan_7 = tID;
                break;
            case 8:
                QieHuan_8 = tID;
                break;
            case 9:
                QieHuan_9 = tID;
                break;
        }
    }
}
</ script >
</ head >

< body >

< DIV  class =qiehuan_on  id =Shao1  onmouseover =QieHuan(1,this);  >
< A  class =qhaon  id =Shao1_a  href ="http://sh.studyget.com/site/xueqian/" > 外教启蒙 </ A >   </ DIV >

< DIV  class =qiehuan_off  id =Shao2  onmouseover =QieHuan(1,this); >
< A  class =qhaoff  id =Shao2_a  href ="http://sh.studyget.com/site/zhongxiaoxue/" > 中小学 </ A >   </ DIV >

< DIV  class =qiehuan_off  id =Shao3  onmouseover =QieHuan(1,this); >
< A  class =qhaoff  id =Shao3_a  href ="http://sh.studyget.com/site/caiyi/" > 才艺 </ A >   </ DIV >


< DIV  id =Shao1_Div  style ="CLEAR: both; DISPLAY: " > [赢在起点]·3-6幼儿启蒙课程 </ DIV >
< DIV  id =Shao2_Div  style ="CLEAR: both; DISPLAY: none" > [上财国际]·“我学我玩”08年国际夏令营 </ DIV >
< DIV  id =Shao3_Div  style ="CLEAR: both; DISPLAY: none" > [021美术]·亲子启智班 </ DIV >


</ body >
</ html >