自制的一个tab

如之前的一篇文章中所说，ajaxtab有这么些毛病，就自己整了个。
项目中以前已经有一个tab，但是所有的在后台用case 1: attribute["onclick"]=***;case2:....这种方式去绑JS(看到这样的代码不知道还有几个人会正常。实在是……)。
昨天一下把后台代码全K掉了。只在html中即可实现！

全部代码如下：

<%@ Control Language="c#" AutoEventWireup="True" Codebehind="ServerInfoMemu.ascx.cs"
    Inherits="ConfigureWeb.Controls.ServerInfoMemu" TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %>
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Fade(Duration=0.2)"/>

<script type="text/javascript" src="../ScriptStyle/pageutil.js"></script>

<table id="Table4" height="5" cellspacing="0" cellpadding="0" width="100%" border="0">
    <tr>
        <td>
        </td>
    </tr>
</table>
<table id="Table2" cellspacing="0" cellpadding="0" width="98%" align="center" border="0">
    <tr>
        <td id="tab_td1" class="InfoMenuOut" onclick="onTD1Click()" onmouseover="onTDMouseOver(this)" onmouseout="onTDMouseOut(this)">
            基本信息
        </td>
        <td id="tab_td2" class="InfoMenuOut" onclick="onTD2Click()" onmouseover="onTDMouseOver(this)" onmouseout="onTDMouseOut(this)">
            硬件信息
        </td>
        <td id="tab_td3" class="InfoMenuOut" onclick="onTD3Click()" onmouseover="onTDMouseOver(this)" onmouseout="onTDMouseOut(this)">
            软件信息
        </td>
        <td id="tab_td4" class="InfoMenuOut" onclick="onTD4Click()" onmouseover="onTDMouseOver(this)" onmouseout="onTDMouseOut(this)">
            进程信息
        </td>
        <td id="tab_td5" class="InfoMenuOut" onclick="onTD5Click()" onmouseover="onTDMouseOver(this)" onmouseout="onTDMouseOut(this)">
            端口信息
        </td>
        <td id="tab_td6" class="InfoMenuOut" onclick="onTD6Click()" onmouseover="onTDMouseOver(this)" onmouseout="onTDMouseOut(this)">
            日志信息
        </td>
    </tr>
</table>

<script type="text/javascript">
function onTDMouseOver(td){td.className="InfoMenuOver";}
function onTDMouseOut(td){td.className="InfoMenuOut";}
function onTD1Click(){ location.href="ServerView.aspx?id=" + queryString("id") + "&activeTD=1"; }
function onTD2Click(){ location.href="ServerHardwareList.aspx?id=" + queryString("id") + "&activeTD=2"; }
function onTD3Click(){ location.href="ServerSoftwareList.aspx?id=" + queryString("id") + "&activeTD=3"; }
function onTD4Click(){ location.href="ServerProcessList.aspx?id=" + queryString("id") + "&activeTD=4"; }
function onTD5Click(){ location.href="ServerPortList.aspx?id=" + queryString("id") + "&activeTD=5"; }
function onTD6Click(){ location.href="ServerLog.aspx?id=" + queryString("id") + "&activeTD=6"; }

//将tab选中
var activeIndex = queryString("activeTD");
if(!activeIndex)
{
    activeIndex = "1";
}
document.getElementById("tab_td" + activeIndex).className = "InfoMenuFocus";
document.getElementById("tab_td" + activeIndex).setAttribute("onmouseover", "");
document.getElementById("tab_td" + activeIndex).setAttribute("onmouseout", "");

附样式：

.InfoMenuOut
{}{
    background-color:#fffafa;
    color:#000000;
    padding-left:5px;
    padding-right:5px;
    width:100px;
    text-align:center;
    font-weight:bold;
}
.InfoMenuOver
{}{
    background-color:#FFFFFF;
    cursor:hand;
    height:22px;
    color:#1e90ff;
    width:100px;
    text-align:center;
    font-weight:bold;
    padding-left:5px;
    padding-right:5px;
}
.InfoMenuFocus
{}{
    cursor:hand;
    height:22px;
    color:#1e90ff;
    width:100px;
    text-align:center;
    font-weight:bold;
    background-color:gainsboro;
    padding-left:5px;
    padding-right:5px;
}

提示：

<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Fade(Duration=0.2)"/>

这个是过度效果（滤镜）