Magento中添加TAB效果

最开始我在Magento 添加JavaScript TAB效果是山寨的一个Magento 自带的一个JavaScript写的.

   今天朋友给我一段代码.简单了很多.

而且兼容IE6,7,FF等.

 

<script type="text/javascript" language="javascript">
//<!CDATA[
function g(o){return document.getElementById(o);}
function HoverLi(n){
//如果有N个标签,就将i<=N;
    for(var i=1;i<=3;i++ )
    {
        g('tb_ '+i).className='tm2';
        g('tbc_0 '+i).style.display='none';
    }
    g('tbc_0 '+n).style.display='block';
    g('tb_ '+n).className='tm1';
}
</script>

 

<style type="text/css">
#MenuUl li{ float:left; margin-right:8px;
    }
#toptab{ background-image:url(images/tab_bg.jpg);}

.tm2 {
    background-image:url(../images/t2.jpg);
    width:100px;
    height:24px;
    padding-top:3px;
    cursor:hand;
}
.tm1 {
    cursor:hand;
    color:#015071;
    background-image:url(../images/t1.jpg);
    width:100px;
    height:24px;
    padding-top:3px;
}

</style>

<div id="ind_container">
  <div id="ind_main_index">
    <div id="ind_news">
   <div style="</div>">
    <div onMouseOver ="x:HoverLi(1);" id="tb_1" class="tm1"><strong>新闻动态</strong></div>
    <div onMouseOver ="x:HoverLi(2);" id="tb_2" class="tm2" style="margin-left: 4px;"><strong>业内新闻</strong></div>
      <div onMouseOver ="x:HoverLi(3);" id="tb_3" class="tm2" style="margin-left: 4px;"><strong>业内新闻</strong></div>
    </div>
    <div id="tbc_01" style="display: block;">
     2222222222222222222
          </div>
          <div style="display: none;" id="tbc_02">
 11111111111111111111
          </div>
              <div style="display: none;" id="tbc_03">
3333333333333
          </div>