JS使用面向对象技术实现的tab选项卡效果示例


Posted in Javascript onFebruary 28, 2017

本文实例讲述了JS使用面向对象技术实现的tab选项卡效果。分享给大家供大家参考,具体如下:

运行效果图如下:

JS使用面向对象技术实现的tab选项卡效果示例

代码如下:

html:

<ul class="scrollUl">
  <li id="m01" class="sd01" value="0"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新服排期</a></li>
  <li id="m02" class="sd02" value="1"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >官方公告</a></li>
</ul>
<div id="c01" style="display: block;">
  <ul>
    <li class="ml10 mt10"><span class="fu"><a title="最三国“群雄逐鹿”震撼开启 敬请期待." class="hei" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >最三国“群雄逐鹿”震撼开启 ...</a></span><span class="hui9">09-28</span></li>
    <li class="ml10"><span class="fu"><a title="最三国“群雄逐鹿”震撼开启 敬请期待." class="hei" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >最三国“群雄逐鹿”震撼开启 ...</a></span><span class="hui9">09-28</span></li>
    <li class="ml10"><span class="fu"><a title="最三国“群雄逐鹿”震撼开启 敬请期待." class="hei" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >最三国“群雄逐鹿”震撼开启 ...</a></span><span class="hui9">09-28</span></li>
    <li class="ml10"><span class="fu"><a title="最三国“群雄逐鹿”震撼开启 敬请期待." class="hei" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >最三国“群雄逐鹿”震撼开启 ...</a></span><span class="hui9">09-28</span></li>
    <li class="ml10"><span class="fu"><a title="最三国“群雄逐鹿”震撼开启 敬请期待." class="hei" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >最三国“群雄逐鹿”震撼开启 ...</a></span><span class="hui9">09-28</span></li>
    <li class="ml10"><span class="fu"><a title="最三国“群雄逐鹿”震撼开启 敬请期待." class="hei" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >最三国“群雄逐鹿”震撼开启 ...</a></span><span class="hui9">09-28</span></li>
  </ul>
</div>
<div class="hidden" id="c02" style="display: none;">
  <ul>
    <li class="ml10 mt10"><span class="fu"><a title="《绝地战争》9月8日维护公告" class="hei" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >《绝地战争》9月8日维护公告</a></span><span class="hui9">09-28</span></li>
    <li class="ml10"><span class="fu"><a title="《绝地战争》9月8日维护公告" class="hei" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >《绝地战争》9月8日维护公告</a></span><span class="hui9">09-28</span></li>
    <li class="ml10"><span class="fu"><a title="《绝地战争》9月8日维护公告" class="hei" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >《绝地战争》9月8日维护公告</a></span><span class="hui9">09-28</span></li>
    <li class="ml10"><span class="fu"><a title="《绝地战争》9月8日维护公告" class="hei" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >《绝地战争》9月8日维护公告</a></span><span class="hui9">09-28</span></li>
    <li class="ml10"><span class="fu"><a title="《绝地战争》9月8日维护公告" class="hei" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >《绝地战争》9月8日维护公告</a></span><span class="hui9">09-28</span></li>
    <li class="ml10"><span class="fu"><a title="《绝地战争》9月8日维护公告" class="hei" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >《绝地战争》9月8日维护公告</a></span><span class="hui9">09-28</span></li>
   </ul>
</div>

js:

function scrollDoor(){
}
scrollDoor.prototype = {
  sd : function(menus,divs,openClass,closeClass){
    var _this = this;
    if(menus.length != divs.length)
    {
      alert("菜单层数量和内容层数量不一样!");
      return false;
    }
    for(var i = 0 ; i < menus.length ; i++)
    {
      _this.$(menus[i]).value = i;
      _this.$(menus[i]).onmouseover = function(){
        //1.先关闭所有的导航和内容:
        for(var j = 0 ; j < menus.length ; j++)
        {
          _this.$(menus[j]).className = closeClass;
          _this.$(divs[j]).style.display = "none";
        }
        //2.打开当前的导航和内容:
        //_this.$(menus[this.value]).className = openClass;
        this.className = openClass;
        _this.$(divs[this.value]).style.display = "block";
      }
    }
  },
  $ : function(oid){
    if(typeof(oid) == "string")
    return document.getElementById(oid);
    return oid;
  }
}
window.onload = function(){
  var SDmodel = new scrollDoor();
  SDmodel.sd(["m01","m02"],["c01","c02"],"sd01","sd02");
  //SDmodel.sd(["m001","m002"],["c001","c002"],"sd01","sd02");
}

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

Javascript 相关文章推荐
checkbox 多选框 联动实现代码
Oct 22 Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
javascript 常用功能总结
Mar 18 Javascript
Javascript图像处理—平滑处理实现原理
Dec 28 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
BootStrap fileinput.js文件上传组件实例代码
Feb 20 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
Oct 24 Javascript
vue scroller返回页面记住滚动位置的实例代码
Jan 29 Javascript
Vue开发实现吸顶效果的示例代码
Aug 21 Javascript
Vue中函数防抖节流的理解及应用实现
Apr 24 Javascript
JavaScript实现点击图片换背景
Nov 20 Javascript
基于cookie实现zTree树刷新后展开状态不变
Feb 28 #Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 #Javascript
canvas绘图不清晰的解决方案
Feb 28 #Javascript
jQuery树控件zTree使用方法详解(一)
Feb 28 #Javascript
js数字计算 误差问题的快速解决方法
Feb 28 #Javascript
js数字舍入误差以及解决方法(必看篇)
Feb 28 #Javascript
JS实现浏览器打印、打印预览示例
Feb 28 #Javascript
You might like
php中在PDO中使用事务(Transaction)
2011/05/14 PHP
PHP中遍历stdclass object的实现代码
2011/06/09 PHP
CodeIgniter与PHP5.6的兼容问题
2015/07/16 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
浅谈Javascript数组索引
2015/07/29 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
JavaScript中的call和apply的用途以及区别
2017/01/11 Javascript
vue使用codemirror的两种用法
2019/08/27 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
详解Python迭代和迭代器
2016/03/28 Python
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
python实现kNN算法
2017/12/20 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
Python绘制热力图示例
2019/09/27 Python
解决Python spyder显示不全df列和行的问题
2020/04/20 Python
tensorflow模型转ncnn的操作方式
2020/05/25 Python
学python需要去培训机构吗
2020/07/01 Python
24个canvas基础知识小结
2014/12/17 HTML / CSS
法国房车租赁网站:Yescapa
2019/08/26 全球购物
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
实习自荐信
2013/10/13 职场文书
大学生学年自我鉴定
2014/02/10 职场文书
老师对学生的评语
2014/04/18 职场文书
服务承诺口号
2014/05/22 职场文书
大三学生学年自我鉴定
2014/09/12 职场文书
2015年党员公开承诺书范文
2015/01/22 职场文书
2015年个人工作总结报告
2015/04/25 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书
Appium中scroll和drag_and_drop根据元素位置滑动
2022/02/15 Python
正则表达式基础与常用验证表达式
2022/06/16 Javascript