頁卡一
      
頁卡二
      
頁卡三
    
    
      
1
      
2
      
3
      
4
    

版本1

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

~function(){
  /*
    tabChange:封裝一個選項卡的插件，只要大結構保持統(tǒng)一，以后實現(xiàn)選項卡的功能，只需要調(diào)取這個方法執(zhí)行即可實現(xiàn)
    param：container當前要實現(xiàn)選項卡的這個容器
        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
版本2(將for循環(huán)改為使用事件委托的方式)
//實現(xiàn)一個選項卡封裝：我們可以分析出，只要多個選項卡的主體結構一樣，那么每個實現(xiàn)的思想都是一樣的，唯一不一樣的就是最外層的盒子不一樣

~function(){
  /*
    tabChange:封裝一個選項卡的插件，只要大結構保持統(tǒng)一，以后實現(xiàn)選項卡的功能，只需要調(diào)取這個方法執(zhí)行即可實現(xiàn)
    param：container當前要實現(xiàn)選項卡的這個容器
        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");
    //具體的切換功能
    
    //使用事件委托優(yōu)化
    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
版本3:面向對象的方式，使用構造函數(shù)
//實現(xiàn)一個選項卡封裝：我們可以分析出，只要多個選項卡的主體結構一樣，那么每個實現(xiàn)的思想都是一樣的，唯一不一樣的就是最外層的盒子不一樣

~function(){
  /*
    tabChange:封裝一個選項卡的插件，只要大結構保持統(tǒng)一，以后實現(xiàn)選項卡的功能，只需要調(diào)取這個方法執(zhí)行即可實現(xiàn)
    param：container當前要實現(xiàn)選項卡的這個容器
        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;
    },
    //事件委托實現(xiàn)綁定切換
    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
關于“js中如何封裝選項卡”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
            
            
                        

            本文名稱：js中如何封裝選項卡            

            網(wǎng)站路徑：http://weahome.cn/article/gpdcpe.html