在Magento Zencart中添加静态的自定义标签TAB切换效果代码

1,978 人次阅读

共计 1280 个字符，预计需要花费 4 分钟才能阅读完成。

一直对的标签TAB切换效果很感兴趣,一起自己折腾一个,偶然在网上看到别人写的一段代码,虽说是独立的,用于哪种php的系统都可以如magento zencart,但还是记录一下,想想什么时候转成magento后台定义的.

兼容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"><strong>新闻动态</strong></div>
    <div onMouseOver ="x:HoverLi(2);" id="tb_2" style="margin-left: 4px;"><strong>业内新闻</strong></div>
      <div onMouseOver ="x:HoverLi(3);" id="tb_3" 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>

有了这个,以后方便多了

正文完