javascript+div实现鼠标划过,切换层效果

IE6、IE7、FireFox下测试通过，
JS文件：
<SCRIPT language=Javascript>
function changea(srcObj,tid)
{
    var tabList = srcObj.parentNode.getElementsByTagName("li");
   
    if(srcObj.className=='b')return;
    for(var i=0;i<tabList.length;i++){
        if(tabList[i].className=='b')tabList[i].className='a';
        document.getElementById("area"+(i+1)).style.display = 'none';
    }
   
    document.getElementById("area"+tid).style.display ='';
    srcObj.className ='b';//TAB切换
    return false;
}
</SCRIPT>
CSS文件：
.trade_detail_ti li{
    width:100px;
    height:30px;
    text-align:center;
    line-height:30px;
    float:left;
    margin:0 5px;
    cursor: pointer;
    font-weight:bold;
}
.trade_detail_ti .a {
    background:#f5dfab;
    color:#b80000;
}
.trade_detail_ti .b {
    background:#a80000;
    color:#fff;
}
HTML文件：
            <ul class="trade_detail_ti">
                <li class="b" onMouseMove="changea(this,'1')">详细信息</li>
                <li class="a" onMouseMove="changea(this,'2')">联系方式</li>
            </ul>
            <div id="area1" style="display: block" class="trade_detail_box"><p>供求详细信息供求详细信息供求详细信息供求详细信息供求详细信息供求详细信息供求详细信息供求详细信息供求详细信息供求详细信息供求详细信息供求详细信息</p></div>
            <ul id="area2" style="display: none" class="trade_ul trade_link" >
                <li><span>学院名称：</span>北京XX大学XX学院</li>
                <li><span>联系人：</span>邹老师</li>
                <li><span>电子邮件：</span>[email protected] </li>
                <li><span>联系电话：</span> 62890000 </li>
                <li><span>邮政编码：</span> 100076</li>
            </ul>