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

你虚度的今日是昨日逝去的人无限向往的明天。美丽的早晨,把压力释放,清凉的秋风,把欢乐吹响,温柔的阳光,把温馨点亮,轻松的心情,把幸福送上,早安!

本文实例讲述了JS实现的tab切换选项卡效果。分享给大家供大家参考,具体如下:

<script type="text/javascript">
/*
tab切换选项卡js效果   writed by *** 2010.08.13
1.currentid:string 当前被激活菜单的id;
2.otherids:Array() 其它未被激活的id;
3.tabclasses:Array() tab被激活时的样式类+tab未被激活时的样式类,存储两个值即可
*/
function chaneTab(currentid,otherids,tabclasses){
  var tagPrefix="tab";
  var conPrefix="con";
  //显示:
  document.getElementById(tagPrefix+currentid).className=tabclasses[0];
  document.getElementById(conPrefix+currentid).style.display="block";
  //隐藏:
  for(var i=0;i<otherids.length;i++){
    document.getElementById(tagPrefix+otherids[i]).className=tabclasses[1];
    document.getElementById(conPrefix+otherids[i]).style.display="none";
  }
}
</script>

应用代码:

<div class="right_centerzbt ml10">
   <div class="tou">
    <ul class="mt50">
      <li onmouseover="chaneTab('001',new Array('002'),new Array('center_bj',''))" id="tab001" class="center_bj"><a>名山明星榜</a></li>
      <li onmouseover="chaneTab('002',new Array('001'),new Array('center_bj',''))" id="tab002"><a>热门群组</a></li>
    </ul>
   </div>
  <div id="con001" style="display: block;" class="right_content1 l bl br bb">
      <iframe width="680" height="391" frameborder="0" scrolling="no" style="margin-left: -1px;" border="0" marginheight="0" marginwidth="0" src="shequ/uchome/do.php?ac=ajax&op=getindexspace"></iframe>   
  </div>
  <div id="con002" style="display: none;" class="right_content1 l bl br bb">
          <ol class="mt10 ml10">
    <li class="quanzi_pic ml10"><a target="_blank" rel="nofollow noopener noreferrer" href="shequ/uchome/space.php?do=mtag&tagid=23" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img onerror="this.onerror=null;this.src='';" src="http://192.168.0.113/shequ/uchome/upload/2010-08/128142654112531.jpg"></a></li>
    <li class="ml5"><a target="_blank" rel="nofollow noopener noreferrer" href="shequ/uchome/space.php?do=mtag&tagid=23" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><b>武林英雄官方群</b></a>(今日:<span><a target="_blank" rel="nofollow noopener noreferrer" href="shequ/uchome/space.php?do=mtag&tagid=23" rel="external nofollow" rel="external nofollow" rel="external nofollow" >0</a></span>)</li>
    <li class="ml5"></li>
    <li class="ml5">主题:<span>0</span>,贴数:<span>0</span></li>
   </ol>
          <ol class="mt10 ">
    <li class="quanzi_pic ml10"><a target="_blank" rel="nofollow noopener noreferrer" href="shequ/uchome/space.php?do=mtag&tagid=14" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img onerror="this.onerror=null;this.src='';" src="http://192.168.0.113/shequ/uchome/upload/2010-08/128142678521940.jpg"></a></li>
    <li class="ml5"><a target="_blank" rel="nofollow noopener noreferrer" href="shequ/uchome/space.php?do=mtag&tagid=14" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><b>游戏贴图</b></a>(今日:<span><a target="_blank" rel="nofollow noopener noreferrer" href="shequ/uchome/space.php?do=mtag&tagid=14" rel="external nofollow" rel="external nofollow" rel="external nofollow" >0</a></span>)</li>
    <li class="ml5">这里是维客分享与会员互动区。您的...</li>
    <li class="ml5">主题:<span>0</span>,贴数:<span>0</span></li>
   </ol>
          <ol class="mt10 ml10">
    <li class="quanzi_pic ml10"><a target="_blank" rel="nofollow noopener noreferrer" href="shequ/uchome/space.php?do=mtag&tagid=20" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img onerror="this.onerror=null;this.src='';" src="http://192.168.0.113/shequ/uchome/upload/2010-08/12814265524528.jpg"></a></li>
    <li class="ml5"><a target="_blank" rel="nofollow noopener noreferrer" href="shequ/uchome/space.php?do=mtag&tagid=20" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><b>三国群英传官方群</b></a>(今日:<span><a target="_blank" rel="nofollow noopener noreferrer" href="shequ/uchome/space.php?do=mtag&tagid=20" rel="external nofollow" rel="external nofollow" rel="external nofollow" >0</a></span>)</li>
    <li class="ml5"></li>
    <li class="ml5">主题:<span>1</span>,贴数:<span>1</span></li>
   </ol>
          <ol class="mt10 ">
    <li class="quanzi_pic ml10"><a target="_blank" rel="nofollow noopener noreferrer" href="shequ/uchome/space.php?do=mtag&tagid=18" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img onerror="this.onerror=null;this.src='';" src="http://192.168.0.113/shequ/uchome/upload/2010-08/128142657314254.jpg"></a></li>
    <li class="ml5"><a target="_blank" rel="nofollow noopener noreferrer" href="shequ/uchome/space.php?do=mtag&tagid=18" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><b>飘渺仙剑客服群</b></a>(今日:<span><a target="_blank" rel="nofollow noopener noreferrer" href="shequ/uchome/space.php?do=mtag&tagid=18" rel="external nofollow" rel="external nofollow" rel="external nofollow" >0</a></span>)</li>
    <li class="ml5"></li>
    <li class="ml5">主题:<span>0</span>,贴数:<span>0</span></li>
   </ol>
          <ol class="mt10 ml10">
    <li class="quanzi_pic ml10"><a target="_blank" rel="nofollow noopener noreferrer" href="shequ/uchome/space.php?do=mtag&tagid=17" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img onerror="this.onerror=null;this.src='';" src="http://192.168.0.113/shequ/uchome/upload/2010-08/128142658426959.jpg"></a></li>
    <li class="ml5"><a target="_blank" rel="nofollow noopener noreferrer" href="shequ/uchome/space.php?do=mtag&tagid=17" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><b>武林英雄客服群</b></a>(今日:<span><a target="_blank" rel="nofollow noopener noreferrer" href="shequ/uchome/space.php?do=mtag&tagid=17" rel="external nofollow" rel="external nofollow" rel="external nofollow" >0</a></span>)</li>
    <li class="ml5"></li>
    <li class="ml5">主题:<span>1</span>,贴数:<span>1</span></li>
   </ol>
          <ol class="mt10 ">
    <li class="quanzi_pic ml10"><a target="_blank" rel="nofollow noopener noreferrer" href="shequ/uchome/space.php?do=mtag&tagid=25" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img onerror="this.onerror=null;this.src='';" src="http://192.168.0.113/shequ/uchome/upload/2010-08/12814265147740.jpg"></a></li>
    <li class="ml5"><a target="_blank" rel="nofollow noopener noreferrer" href="shequ/uchome/space.php?do=mtag&tagid=25" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><b>飘渺仙剑官方群</b></a>(今日:<span><a target="_blank" rel="nofollow noopener noreferrer" href="shequ/uchome/space.php?do=mtag&tagid=25" rel="external nofollow" rel="external nofollow" rel="external nofollow" >0</a></span>)</li>
    <li class="ml5"></li>
    <li class="ml5">主题:<span>0</span>,贴数:<span>0</span></li>
   </ol>
          <ol class="mt10 ml10">
    <li class="quanzi_pic ml10"><a target="_blank" rel="nofollow noopener noreferrer" href="shequ/uchome/space.php?do=mtag&tagid=13" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img onerror="this.onerror=null;this.src='';" src="http://192.168.0.113/shequ/uchome/upload/2010-08/128142679512873.jpg"></a></li>
    <li class="ml5"><a target="_blank" rel="nofollow noopener noreferrer" href="shequ/uchome/space.php?do=mtag&tagid=13" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><b>游戏交友</b></a>(今日:<span><a target="_blank" rel="nofollow noopener noreferrer" href="shequ/uchome/space.php?do=mtag&tagid=13" rel="external nofollow" rel="external nofollow" rel="external nofollow" >0</a></span>)</li>
    <li class="ml5">记录管理人员的意见或建议。</li>
    <li class="ml5">主题:<span>0</span>,贴数:<span>0</span></li>
   </ol>
          <ol class="mt10 ">
    <li class="quanzi_pic ml10"><a target="_blank" rel="nofollow noopener noreferrer" href="shequ/uchome/space.php?do=mtag&tagid=15" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img onerror="this.onerror=null;this.src='';" src="http://192.168.0.113/shequ/uchome/upload/2010-08/128142677312935.jpg"></a></li>
    <li class="ml5"><a target="_blank" rel="nofollow noopener noreferrer" href="shequ/uchome/space.php?do=mtag&tagid=15" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><b>游戏交易</b></a>(今日:<span><a target="_blank" rel="nofollow noopener noreferrer" href="shequ/uchome/space.php?do=mtag&tagid=15" rel="external nofollow" rel="external nofollow" rel="external nofollow" >0</a></span>)</li>
    <li class="ml5">生活中的小窍门,都拿出来和大家分...</li>
    <li class="ml5">主题:<span>0</span>,贴数:<span>0</span></li>
   </ol>
         </div>
 </div>

效果图:

希望本文所述对大家JavaScript程序设计有所帮助。

到此这篇关于JS实现的tab切换选项卡效果示例就介绍到这了。分分秒秒,构筑辉煌。更多相关JS实现的tab切换选项卡效果示例内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

您可能有感兴趣的文章
JS实现选项卡效果的代码实例

微信小程序的tab选项卡的实现效果

微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解

JQuery样式操作、click事件以及索引值-选项卡应用示例

jquery实现选项卡切换代码实例