js中如何封裝選項卡

這篇文章將為大家詳細講解有關js中如何封裝選項卡，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

這個插件對應的html的結構如下

<div class='box' id='tabFir'>
    <ul id='tabOptions'>
      <li class='select'>頁卡一</li>
      <li>頁卡二</li>
      <li>頁卡三</li>
    </ul>
    <div class='select'>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
    <div>內容二</div>
    <div>內容三</div>
  </div>

版本1

//實現一個選項卡封裝：我們可以分析出，只要多個選項卡的主體結構一樣，那么每個實現的思想都是一樣的，唯一不一樣的就是最外層的盒子不一樣

~function(){
  /*
    tabChange:封裝一個選項卡的插件，只要大結構保持統一，以后實現選項卡的功能，只需要調取這個方法執行即可實現
    param：container當前要實現選項卡的這個容器
        defaultIndex:默認選中項的索引
  */
  function tabChange(container,defaultIndex){
    var tabFirst = utils.firstChild(container),oLis = utils.children(tabFirst);
    var divList = utils.children(container,"div");
    //讓defaultIndex對應的頁卡有選中的樣式
    defaultIndex = defaultIndex || 0;
    utils.addClass(oLis[defaultIndex],"select");
    utils.addClass(divList[defaultIndex],"select");
    //具體的切換功能
    for(var i = 0;i<oLis.length;i++){
      oLis[i].onclick = function(){
        utils.addClass(this,"select");
        var curSiblings = utils.siblings(this);
        for(var i = 0;i<curSiblings.length;i++){
          utils.removeClass(curSiblings[i],"select")
        }
        var index = utils.index(this);
        for(var i = 0;i<divList.length;i++){
          i===index ? utils.addClass(divList[i],"select") : utils.removeClass(divList[i],"select")
        }
      }  
    }
    
  }
  window.fTab = tabChange
  
}()

版本2(將for循環改為使用事件委托的方式)

//實現一個選項卡封裝：我們可以分析出，只要多個選項卡的主體結構一樣，那么每個實現的思想都是一樣的，唯一不一樣的就是最外層的盒子不一樣

~function(){
  /*
    tabChange:封裝一個選項卡的插件，只要大結構保持統一，以后實現選項卡的功能，只需要調取這個方法執行即可實現
    param：container當前要實現選項卡的這個容器
        defaultIndex:默認選中項的索引
  */
  function tabChange(container,defaultIndex){
    var tabFirst = utils.firstChild(container),oLis = utils.children(tabFirst);
    var divList = utils.children(container,"div");
    //讓defaultIndex對應的頁卡有選中的樣式
    defaultIndex = defaultIndex || 0;
    utils.addClass(oLis[defaultIndex],"select");
    utils.addClass(divList[defaultIndex],"select");
    //具體的切換功能
    
    //使用事件委托優化
    tabFirst.onclick = function(e){
      e = e || window.event;
      e.target = e.target || e.srcElement;
      if(e.target.tagName.toLowercase()==="li"){//說明當前點擊的是li標簽
        detailFn.call(e.target,oLis,divList);

      }
    }
  }
  function detailFn(oLis,divList){
    var index = utils.index(this);
    utils.addClass(this,"select");
    for(var i = 0;i<oLis.length;i++){
      i!==index?utils.removeClass(oLis[i],"select"):null;
      i===index ? utils.addClass(divList[i],"select") : utils.removeClass(divList[i],"select");
    }
  }
  window.fTab = tabChange
  
}()

版本3:面向對象的方式，使用構造函數

//實現一個選項卡封裝：我們可以分析出，只要多個選項卡的主體結構一樣，那么每個實現的思想都是一樣的，唯一不一樣的就是最外層的盒子不一樣

~function(){
  /*
    tabChange:封裝一個選項卡的插件，只要大結構保持統一，以后實現選項卡的功能，只需要調取這個方法執行即可實現
    param：container當前要實現選項卡的這個容器
        defaultIndex:默認選中項的索引
  */


  function TabChange(container,defaultIndex){
    this.init(container,defaultIndex);

  }
  TabChange.prototype = {
    constructor:TabChange,//注意重寫原型方法，需要重新指定構造器
    //初始化 ，也是當前插件的唯一入口
    init:function(container,defaultIndex){
      this.container = container || null;
      this.defaultIndex = defaultIndex || 0;
      this.tabFirst = utils.firstChild(this.container);
      this.oLis = utils.children(this.tabFirst);
      this.divList = utils.children(this.container,"div");

      this.defaultIndexEven();
      this.liveClick();
      return this;
    },
    //事件委托實現綁定切換
    liveClick:function(){
      var _this = this;
      this.tabFirst.onclick = function(e){
        e = e || window.event;
        e.target = e.target || e.srcElement;
        if(e.target.tagName.toLowercase()==="li"){//說明當前點擊的是li標簽
          _this.detailFn(e.target);

        }
      }
    },
    detailFn:function(curEle){
      var index = utils.index(curEle);
      utils.addClass(curEle,"select");
      for(var i = 0;i<this.oLis.length;i++){
        i!==index?utils.removeClass(this.oLis[i],"select"):null;
        i===index ? utils.addClass(this.divList[i],"select") : utils.removeClass(this.divList[i],"select");
      }
    },
    //按照索引來設置默認選中的頁卡
    defaultIndexEven:function(){
      utils.addClass(this.oLis[this.defaultIndex],"select");
      utils.addClass(this.divList[this.defaultIndex],"select");
    }

  }
  window.fTab = TabChange
  
}()

//使用
var box1 = new fTab(boxList[0],0)

關于“js中如何封裝選項卡”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。