原生js使用面向对象的方法开发选项卡实例教程

div class="tab_box" class="tabContainer">div>

var oData = [
  {
    label:‘html‘,
    content:‘HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。‘
  },
  {
    label:‘css‘,
    content:‘层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。‘
  },
  {
    label:‘javascript‘,
    content:‘JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。‘
  },
];

//创建选项卡构造函数，elem:DOM元素；data:生成选项卡的数据；option:选项卡对象相关选项属性
function TabClass(elem,data){

}

function TabClass(elem,data,option){
  //设置数据
  this.data = data;
  //设置选项卡包裹
  this.wrap = elem;
  //创建标签包裹
  this.labelBox = document.createElement(‘ul‘);
  //设置标签包裹class
  this.labelBox.className = ‘label_box‘;
  //创建内容包裹
  this.contentBox = document.createElement(‘div‘);
  //设置内容包裹class
  this.contentBox.className = ‘content_box‘;
}

function TabClass(elem,data,option=null){

  /*...*/

  //设置默认属性
  this.options = {
    //默认切换标签是点击事件
    event:‘click‘,
    //默认当前标签显示第一个
    index:0
  }
  //修改选项属性
  if(option instanceof Object){
    for(let k in option){
      this.options[k] = option[k];
    }
  }
}

TabClass.prototype.creatDataElem = function(){
  //声明标签html代码字符串变量
  var sLabel = ‘‘;
  //声明内容html代码字符串变量
  var sContent = ‘‘;
  //通过循环数据，生成标签和内容元素
  this.data.forEach((e,i)=>{
    //判断选项中默认当前标签和显示内容
    if(i==this.options.index){  
      sLabel += ‘

TabClass.prototype.init = function(){
  //声明_self变量，用于在事件函数中指向实例对象
  var _self = this;
  //调用creatDataElem方法生成DOM元素
  this.creatDataElem();
  //在标签上绑定事件
  this.labelBox.addEventListener(this.options.event,function(event){
    //获取点击的DOM元素
    var eTarget = event.target;
    //判断当前点击的不是当前标签
    if(eTarget.nodeName.toLowerCase() == ‘li‘ && eTarget.className != ‘active‘){
      //修改当前标签
      _self.options.index = eTarget.dataset.index;
      //重新生成DOM元素
      _self.creatDataElem();
    }
  });
}

function TabClass(elem,data,option){
  
  /* ...  */
  
  /* ...  */
  
  //初始化实例对象
  this.init();
}

var eContainer = document.getElementById(‘tabContainer‘);
new TabClass(eContainer,oData);

var eContainer = document.getElementById(‘tabContainer‘);
new TabClass(eContainer,oData,{index:1,event:‘mouseover‘});