js实现的tab切换选项卡_JS实现的tab切换选项卡效果示例

【www.bbyears.com--js教程】

<script type="text/javascript">

/*

tab切换选项卡js效果   writed by *** 2010.08.13

1.currentid:string 当前被激活菜单的id;

2.otherids:Array() 其它未被激活的id;

3.tabclasses:Array() tab被激活时的样式类+tab未被激活时的样式类,存储两个值即可

*/

functionchaneTab(currentid,otherids,tabclasses){

  vartagPrefix="tab";

  varconPrefix="con";

  //显示：

  document.getElementById(tagPrefix+currentid).className=tabclasses[0];

  document.getElementById(conPrefix+currentid).style.display="block";

  //隐藏：

  for(vari=0;i

    document.getElementById(tagPrefix+otherids[i]).className=tabclasses[1];

    document.getElementById(conPrefix+otherids[i]).style.display="none";

  }

}

</script>

应用代码：

      名山明星榜

      热门群组

    武林英雄官方群(今日：0)

    主题：0，贴数：0

    游戏贴图(今日：0)

    这里是维客分享与会员互动区。您的...

    主题：0，贴数：0

    三国群英传官方群(今日：0)

    主题：1，贴数：1

    飘渺仙剑客服群(今日：0)

    主题：0，贴数：0

    武林英雄客服群(今日：0)

    主题：1，贴数：1

    飘渺仙剑官方群(今日：0)

    主题：0，贴数：0

    游戏交友(今日：0)

    记录管理人员的意见或建议。

    主题：0，贴数：0

    游戏交易(今日：0)

    生活中的小窍门，都拿出来和大家分...

    主题：0，贴数：0

效果图：

本文来源：http://www.bbyears.com/wangyezhizuo/127152.html