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 相关文章推荐
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
Jul 06 Javascript
基于jquery的inputlimiter 实现字数限制功能
May 30 Javascript
Javascript简单实现可拖动的div
Oct 22 Javascript
简述Jquery与DOM对象
Jul 10 Javascript
javascript事件委托的用法及其好处简析
Apr 04 Javascript
jQuery.Form上传文件操作
Feb 05 Javascript
详解webpack+es6+angular1.x项目构建
May 02 Javascript
移动端触摸滑动插件swiper使用方法详解
Aug 11 Javascript
javascript代码优化的8点总结
Jan 29 Javascript
详解React中合并单元格的正确写法
Jan 08 Javascript
微信小程序新闻网站详情页实例代码
Jan 10 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
Apr 15 Javascript
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 Global变量定义当前页面的全局变量实现探讨
2013/06/05 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
PHP用FTP类上传文件视频等的简单实现方法
2016/09/23 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
PHPMailer ThinkPHP实现自动发送邮件功能
2018/06/10 PHP
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
jquery实现的动态回到顶部特效代码
2015/10/28 Javascript
Vue infinite update loop的问题解决
2019/04/23 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
2020/11/17 Javascript
JavaScript 如何在浏览器中使用摄像头
2020/12/02 Javascript
Vue中强制组件重新渲染的正确方法
2021/01/03 Vue.js
python连接oracle数据库实例
2014/10/17 Python
使用Python的Tornado框架实现一个简单的WebQQ机器人
2015/04/24 Python
python实现复制整个目录的方法
2015/05/12 Python
python中numpy包使用教程之数组和相关操作详解
2017/07/30 Python
浅谈Python中的私有变量
2018/02/28 Python
python简单验证码识别的实现方法
2019/05/10 Python
详解Python中的Lock和Rlock
2021/01/26 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
Europcar西班牙:全球汽车租赁领域的领导者
2018/09/17 全球购物
总经理驾驶员岗位职责
2013/12/04 职场文书
2014年大学生就业规划书
2014/04/04 职场文书
学校读书活动总结
2014/06/30 职场文书
人事经理岗位职责范本
2014/08/04 职场文书
街道务虚会发言材料
2014/10/20 职场文书
2014年学生会个人工作总结
2014/11/07 职场文书
2014年工人工作总结
2014/11/25 职场文书
幼师自荐信范文(2016推荐篇)
2016/01/28 职场文书
Redis实战高并发之扣减库存项目
2022/04/14 Redis