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

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

成都创新互联是一家专业提供嘉黎企业网站建设,专注与网站建设、成都网站建设、H5响应式网站、小程序制作等业务。10年已为嘉黎众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。

运行效果图如下：

代码如下：

html:


  新服排期
  官方公告


  
    最三国“群雄逐鹿”震撼开启 ...09-28
    最三国“群雄逐鹿”震撼开启 ...09-28
    最三国“群雄逐鹿”震撼开启 ...09-28
    最三国“群雄逐鹿”震撼开启 ...09-28
    最三国“群雄逐鹿”震撼开启 ...09-28
    最三国“群雄逐鹿”震撼开启 ...09-28
  


  
    《绝地战争》9月8日维护公告09-28
    《绝地战争》9月8日维护公告09-28
    《绝地战争》9月8日维护公告09-28
    《绝地战争》9月8日维护公告09-28
    《绝地战争》9月8日维护公告09-28
    《绝地战争》9月8日维护公告09-28

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面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

当前名称：JS使用面向对象技术实现的tab选项卡效果示例
文章转载：http://cqcxhl.com/article/gjcsej.html

重庆分公司，新征程启航

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

其他资讯