這篇文章將為大家詳細(xì)講解有關(guān)js中如何封裝選項(xiàng)卡，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

為企業(yè)提供成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、網(wǎng)站優(yōu)化、營銷型網(wǎng)站、競價(jià)托管、品牌運(yùn)營等營銷獲客服務(wù)。成都創(chuàng)新互聯(lián)擁有網(wǎng)絡(luò)營銷運(yùn)營團(tuán)隊(duì)，以豐富的互聯(lián)網(wǎng)營銷經(jīng)驗(yàn)助力企業(yè)精準(zhǔn)獲客，真正落地解決中小企業(yè)營銷獲客難題，做到“讓獲客更簡單”。自創(chuàng)立至今，成功用技術(shù)實(shí)力解決了企業(yè)“網(wǎng)站建設(shè)、網(wǎng)絡(luò)品牌塑造、網(wǎng)絡(luò)營銷”三大難題，同時(shí)降低了營銷成本，提高了有效客戶轉(zhuǎn)化率，獲得了眾多企業(yè)客戶的高度認(rèn)可！

這個(gè)插件對(duì)應(yīng)的html的結(jié)構(gòu)如下

<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>內(nèi)容二</div>
    <div>內(nèi)容三</div>
  </div>

版本1

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

~function(){
  /*
    tabChange:封裝一個(gè)選項(xiàng)卡的插件，只要大結(jié)構(gòu)保持統(tǒng)一，以后實(shí)現(xiàn)選項(xiàng)卡的功能，只需要調(diào)取這個(gè)方法執(zhí)行即可實(shí)現(xiàn)
    param：container當(dāng)前要實(shí)現(xiàn)選項(xiàng)卡的這個(gè)容器
        defaultIndex:默認(rèn)選中項(xiàng)的索引
  */
  function tabChange(container,defaultIndex){
    var tabFirst = utils.firstChild(container),oLis = utils.children(tabFirst);
    var divList = utils.children(container,"div");
    //讓defaultIndex對(duì)應(yīng)的頁卡有選中的樣式
    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循環(huán)改為使用事件委托的方式)

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

~function(){
  /*
    tabChange:封裝一個(gè)選項(xiàng)卡的插件，只要大結(jié)構(gòu)保持統(tǒng)一，以后實(shí)現(xiàn)選項(xiàng)卡的功能，只需要調(diào)取這個(gè)方法執(zhí)行即可實(shí)現(xiàn)
    param：container當(dāng)前要實(shí)現(xiàn)選項(xiàng)卡的這個(gè)容器
        defaultIndex:默認(rèn)選中項(xiàng)的索引
  */
  function tabChange(container,defaultIndex){
    var tabFirst = utils.firstChild(container),oLis = utils.children(tabFirst);
    var divList = utils.children(container,"div");
    //讓defaultIndex對(duì)應(yīng)的頁卡有選中的樣式
    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"){//說明當(dāng)前點(diǎn)擊的是li標(biāo)簽
        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:面向?qū)ο蟮姆绞剑褂脴?gòu)造函數(shù)

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

~function(){
  /*
    tabChange:封裝一個(gè)選項(xiàng)卡的插件，只要大結(jié)構(gòu)保持統(tǒng)一，以后實(shí)現(xiàn)選項(xiàng)卡的功能，只需要調(diào)取這個(gè)方法執(zhí)行即可實(shí)現(xiàn)
    param：container當(dāng)前要實(shí)現(xiàn)選項(xiàng)卡的這個(gè)容器
        defaultIndex:默認(rèn)選中項(xiàng)的索引
  */


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

  }
  TabChange.prototype = {
    constructor:TabChange,//注意重寫原型方法，需要重新指定構(gòu)造器
    //初始化 ，也是當(dāng)前插件的唯一入口
    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;
    },
    //事件委托實(shí)現(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"){//說明當(dāng)前點(diǎn)擊的是li標(biāo)簽
          _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");
      }
    },
    //按照索引來設(shè)置默認(rèn)選中的頁卡
    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)

關(guān)于“js中如何封裝選項(xiàng)卡”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

網(wǎng)站欄目：js中如何封裝選項(xiàng)卡
網(wǎng)站URL：http://www.chinadenli.net/article34/gpdcpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、電子商務(wù)、企業(yè)網(wǎng)站制作、企業(yè)建站、虛擬主機(jī)、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)