JS实现的tab切换选项卡效果示例
齐振
本文向大家介绍JS实现的tab切换选项卡效果示例，包括了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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
类似资料：
-
本文向大家介绍JS封装的选项卡TAB切换效果示例，包括了JS封装的选项卡TAB切换效果示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS封装的选项卡TAB切换效果。分享给大家供大家参考，具体如下： 运行效果图如下： 更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScri
-
本文向大家介绍jQuery实现Tab选项卡切换效果简单演示，包括了jQuery实现Tab选项卡切换效果简单演示的使用技巧和注意事项，需要的朋友参考一下 本文实例针对jQuery实现Tab选项卡切换效果进行了简单演示，完全是自己的思考实现过程，分享给大家供大家参考。具体如下： 起初我Html代码架子是这样的： 后来换成了下面这个： 之所以换成这个，是因为我觉得 dl dt dd 在页面布局中用的比
-
本文向大家介绍jQuery简单实现tab选项卡切换效果，包括了jQuery简单实现tab选项卡切换效果的使用技巧和注意事项，需要的朋友参考一下 抽空把公司项目上用的tab效果封装了一下，实在是需要用的地方太多了~~~ 效果图： 代码： 以上就是本文的全部内容，希望能给大家一个参考，也希望大家多多支持呐喊教程。
-
本文向大家介绍js实现tab选项卡切换功能，包括了js实现tab选项卡切换功能的使用技巧和注意事项，需要的朋友参考一下 话不多说，请看代码： 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持呐喊教程！
-
本文向大家介绍Android多个TAB选项卡切换效果，包括了Android多个TAB选项卡切换效果的使用技巧和注意事项，需要的朋友参考一下 在前一期中，我们做了悬浮头部的两个tab切换和下拉刷新效果，后来项目中要求改成三个tab，当时就能估量了一下，如果从之前的改，也不是不可以，但是要互相记住的状态就太多了，很容易出现错误。就决定重新实现一下这个效果，为此先写了一个demo，这期间项目都已经又更新
-
本文向大家介绍vue实现选项卡及选项卡切换效果，包括了vue实现选项卡及选项卡切换效果的使用技巧和注意事项，需要的朋友参考一下 这里不跟大家再去把Vue文档上的一些指令用法或者基础知识再复述一遍，既然是从入门到实战，我直接将平时项目中需要实现的一些效果拆分成模块。你们遇到了相关的指令或者不知道怎么用的方法自己对着文档去查，再回过头来看我的实现代码。记住，通读Vue文档真的很重要，很重要！ 这里的V
-
本文向大家介绍很实用的js选项卡切换效果，包括了很实用的js选项卡切换效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js实现简单的选项卡切换效果的具体代码，供大家参考，具体内容如下 js选项卡切换代码： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍jQuery实现TAB选项卡切换特效简单演示，包括了jQuery实现TAB选项卡切换特效简单演示的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享jQuery实现TAB选项卡切换特效，供大家参考，具体内容如下 1、tab切换 on 2、tab切换 mouseenter 效果图： 以上就是本文的全部内容，希望对大家的学习有所帮助。