tab菜单的问题

function g(o){return document.getElementById(o);}
function HoverLi(n){
for(var i=1;i<=7;i++)
{g('tb_'+i).className='normaltab';g('tbc_0'+i).className='undis';}
 g('tbc_0'+n).className='dis';g('tb_'+n).className='hovertab';};
 //这是一个tab菜单，原本只能成一种样式
 //我做的菜单里面有两种样式，而且onclick过后也会给两种不同的菜单修改成另外两种另外的样式
 //这段代码应该怎样改一下
<div id="tb_" class="tb_">
   <ul>
    <li id="tb_1" class="hovertab" onclick="x:HoverLi(1);">
    <a name="zifeishuoming" class="nounderline">资费说明</a></li>
    <li id="tb_2" class="normaltab" onclick="i:HoverLi(2);">
    <a name="caozuoliucheng" class="nounderline">操作流程</a></li>
    <li id="tb_3" class="normaltab" onclick="a:HoverLi(3);">
    <a name="shiyongfangfa" class="nounderline">使用方法</a></li>
    <li id="tb_4" class="normaltab" onclick="o:HoverLi(4);">
    <a name="woyaotiyan" class="nounderline">我要体验</a></li>
<li id="tb_5" class="normaltabspe" onclick="o:HoverLi(5);"><a name="woyaotiyan" class="nounderline">手机彩票身份认证和领奖流程</a></li>
    <li id="tb_6" class="normaltab" onclick="o:HoverLi(6);">
    <a name="kefubangzhu" class="nounderline">客服帮助</a></li>
      <li id="tb_7" class="normaltab" onclick="o:HoverLi(7);">其他</li>
   </ul>
 </div>css:
.normaltab{background-image:url(../images/wallet_normal.jpg); background-repeat: no-repeat; margin-left:5px;}
.hovertab{ background-image: url(../images/wallet_hover.jpg);background-repeat: no-repeat;margin-left:5px; }.normaltab_spe{ width:208px; background-image: url(../images/wllet_spe_normal.png); background-repeat: no-repeat; margin-left:5px;}
.hovertab_spe{width:208px; background-image: url(../images/wallet_spe_hover.jpg);background-repeat: no-repeat;margin-left:5px; }