[Javascript]多页签窗口的实现

Infragistics公司的多页签控件功能确实强大，但在实际运行过程中总是会出一些莫名其妙的问题，运行速度也不快。因此，在分析了该控件所呈现的网页代码后，决定自己写一个让自己放心的控件。有兴趣的朋友可以仿照这个再添加几个页签。

以下是实现多页签窗口的代码：（本实例里面的图片和style以及表格等代码版权属Infragistics公司所有）

< html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>终端信息</title>
<script language="javascript">
//当前选中的页签
var CurrSelNo = 0;
//页签的数目
var MaxTabs=6;
function HovIt(objname)
{
    if(CurrSelNo!=objname)
    {
     var btn1='tabInfotd'+objname;
     var btn2=btn1+'R';
    document.getElementById(btn1).className = 'tabInfoHovT';
    document.getElementById(btn2).className = "tabInfoHovTR";
}
}
function DefIt(objname)
{
   if(CurrSelNo!=objname)
{
     var btn1='tabInfotd'+objname;
     var btn2=btn1+'R';
    document.getElementById(btn1).className = 'tabInfoDefT';
    document.getElementById(btn2).className = "tabInfoDefTR";
}
}
function SelIt(objname)
{
     var btn1;
     var btn2;
    for(i=0;i<MaxTabs;i++)
{
btn1='tabInfotd'+i;
    btn2=btn1+'R';
    document.getElementById(btn1).className = 'tabInfoDefT';
    document.getElementById(btn2).className = "tabInfoDefTR";
    document.getElementById('tabInfo_frame'+i).style.display = 'none';
}
btn1='tabInfotd'+objname;
     btn2=btn1+'R';
    document.getElementById(btn1).className = 'tabInfoSelT';
    document.getElementById(btn2).className = "tabInfoSelTR";
    document.getElementById('tabInfo_frame'+objname).style.display = '';
CurrSelNo = objname;
}
</script>
</head>

<body>
<style type=text/css>
.tabInfoDisT{border-width:0px 0px 1px 0px;border-color:#949878;border-style:Solid;height:22px;font-family:Microsoft Sans Serif;font-size:8pt;color:Gray;padding:2px 0 0 7px;cursor:Default;background:url(images/ig_tab_winXP3.gif) no-repeat left 2px;}

.tabInfoSelT{height:22px;font-family:Microsoft Sans Serif;font-size:8pt;color:Black;padding:2px 0 2px 7px;cursor:Default;background:url(images/ig_tab_winXP1.gif) no-repeat left top;}
.tabInfoSelTR{width:6px;cursor:Default;font-size:2px;background:url(images/ig_tab_winXP1.gif) no-repeat right top;}

.tabInfoDefT{border-width:0px 0px 1px 0px;border-color:#949878;border-style:Solid;height:22px;font-family:Microsoft Sans Serif;font-size:8pt;color:Black;padding:2px 0 0 7px;cursor:Hand;background:url(images/ig_tab_winXP3.gif) no-repeat left 2px;}
.tabInfoDefTR{border-width:0px 0px 1px 0px;border-color:#949878;border-style:Solid;width:6px;cursor:Hand;font-size:2px;background:url(images/ig_tab_winXP3.gif) no-repeat right 2px;}

.tabInfoHovT{border-width:0px 0px 1px 0px;border-color:#949878;border-style:Solid;height:22px;font-family:Microsoft Sans Serif;font-size:8pt;color:Black;padding:2px 0 0 7px;cursor:Hand;background:url(images/ig_tab_winXP2.gif) no-repeat left 2px;}
.tabInfoHovTR{border-width:0px 0px 1px 0px;border-color:#949878;border-style:Solid;width:6px;cursor:Hand;font-size:2px;background:url(images/ig_tab_winXP2.gif) no-repeat right 2px;}

</style>
<table border="0" cellspacing="0" cellpadding="0" ></td></tr>
</table>

</body>

</html>

以下为程序所用图片，请放到网页目录下的Images目录下。
ig_tab_winXP1.gif
[Javascript]多页签窗口的实现

ig_tab_winXP2.gif
[Javascript]多页签窗口的实现

ig_tab_winXP3.gif
[Javascript]多页签窗口的实现