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 相关文章推荐
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
Jan 23 Javascript
JavaScript的事件绑定(方便不支持js的时候)
Oct 01 Javascript
浅析$.getJSON异步请求和同步请求
Jun 06 Javascript
javascript如何定义对象数组
Jun 07 Javascript
javascript用正则表达式过滤空格的实现代码
Jun 14 Javascript
AngularJS实现Input格式化的方法
Nov 07 Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
Vue表单控件绑定图文详解
Feb 11 Javascript
JS实现网页烟花动画效果
Mar 10 Javascript
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
基于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
解决cPanel无法安装php5.2.17
2014/06/22 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
基于react组件之间的参数传递(详解)
2017/09/05 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
2017/11/13 Javascript
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
JS中FileReader类实现文件上传及时预览功能
2020/03/27 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
Python简明入门教程
2015/08/04 Python
教你学会使用Python正则表达式
2017/09/07 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
详解CSS3阴影 box-shadow的使用和技巧总结
2016/12/03 HTML / CSS
SmartBuyGlasses美国官网:太阳眼镜和眼镜
2017/08/20 全球购物
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
我们的节日国庆活动方案
2014/08/19 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
杭白菊导游词
2015/02/10 职场文书
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android
MySQL的存储过程和相关函数
2022/04/26 MySQL