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


Posted in Javascript onFebruary 28, 2017

本文实例讲述了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>

效果图:

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

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

Javascript 相关文章推荐
event.srcElement+表格应用
Aug 29 Javascript
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
Mar 27 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
Nov 14 Javascript
JS实现下拉框的动态添加(附效果)
Apr 03 Javascript
JsRender for object语法简介
Oct 31 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
Mar 02 Javascript
javascript实现对表格元素进行排序操作
Nov 18 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
Angular中$broadcast和$emit的使用方法详解
May 22 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
Jul 20 Javascript
Vue实现小购物车功能
Dec 21 Vue.js
jQuery Pagination分页插件使用方法详解
Feb 28 #Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 #Javascript
canvas红包照片实例分享
Feb 28 #Javascript
详解本地Node.js服务器作为api服务器的解决办法
Feb 28 #Javascript
jquery操作select取值赋值与设置选中实例
Feb 28 #Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 #Javascript
基于cookie实现zTree树刷新后展开状态不变
Feb 28 #Javascript
You might like
php目录操作实例代码
2014/02/21 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
JavaScript 对象成员的可见性说明
2009/10/16 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
2011/04/07 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
详解Bootstrap插件
2016/04/25 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
vue 1.0 结合animate.css定义动画效果
2018/07/11 Javascript
Vue实现简单分页器
2018/12/29 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
javascript实现时钟动画
2020/12/03 Javascript
python网络编程之数据传输UDP实例分析
2015/05/20 Python
Python本地与全局命名空间用法实例
2015/06/16 Python
Python标准库inspect的具体使用方法
2017/12/06 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
Python二维码生成识别实例详解
2019/07/16 Python
详解python中__name__的意义以及作用
2019/08/07 Python
python学生管理系统的实现
2020/04/05 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
物业公司采购员岗位职责
2013/12/31 职场文书
小学生元旦广播稿
2014/02/21 职场文书
国窖1573广告词
2014/03/21 职场文书
离婚案件答辩状
2015/05/22 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书
门卫管理制度范本
2015/08/05 职场文书
《槐乡的孩子》教学反思
2016/02/20 职场文书
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫