bootstrap之tab.js源碼解讀

# tab.js所須要的html結構以下

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTabs">
  <li class="active">
    <a href="#home">Home</a>
  </li>
  <li>
    <a href="#profile">Profile</a>
  </li>
  <li>
    <a href="#messages">Messages</a>
  </li>
  <li>
    <a href="#settings">Settings</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home">home</div>
  <div class="tab-pane" id="profile">profile</div>
  <div class="tab-pane" id="messages">messages</div>
  <div class="tab-pane" id="settings">settings</div>
</div>

# 核心代碼說明

# html結構須要注意

1.a標籤上的href的值要和tab-pane的id值同樣，或者給a標籤添加data-tagert屬性而且和tab-pane的id值同樣

2.若是a標籤上沒有data-toggle="tab"，就須要以下代碼來實現tab切換功能

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show') // 
})
// 若是a標籤上有data-toggle="tab"屬性，就不須要任何的js代碼，只須要引入tab.js便可

# js代碼以下

;+(function ($) {
  'use strict'

  // TAB CLASS DEFINITION
  // ====================

  var Tab = function (element) {
    // 添加實例屬性element
    this.element = $(element)
  }
  // 添加靜態屬性
  Tab.VERSION = '3.3.7'

  //tab原型show函數
  Tab.prototype.show = function () {
    // 獲取當前點擊的元素 該元素爲li下面的a元素
    var $this = this.element
    var $ul = $this.closest('ul:not(.dropdown-menu)')
    var selector = $this.data('target')
    // 若是經過target屬性，沒有獲取到值，就獲取href值
    if (!selector) {
      selector = $this.attr('href') // 獲取href屬性，後面須要經過href值來獲取tab-pane元素
      //正則替換部分：任意個.不對#號記錄，以任意非空白字符結束。使用空字符串替換.#號前面字符
      selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
    }
    //若是當前li已經觸發，返回
    if ($this.parent('li').hasClass('active')) return

    var $previous = $ul.find('.active:last a') //選擇最後active的後代元素 a

    // 獲取目標tab-pane元素
    var $target = $(selector)
    // tab的顯示和隱藏
    this.activate($this.closest('li'), $ul)
    // tab-pane的顯示和隱藏
    this.activate($target, $target.parent())
  }

  Tab.prototype.activate = function (element, container, callback) {
    // 這個$active是li標籤(不是裏面的a標籤)
    var $active = container.find('> .active') //container後代active元素
    //下一個
    function next() {
      $active.removeClass('active') //移除active類

      element.addClass('active') //在傳入元素上增長active類

      callback && callback() //若callback爲true，則把callback當作函數執行;相似於if(callback){callback()}
    }
    $active.length && next()
  }

  // TAB PLUGIN DEFINITION
  // =====================

  function Plugin(option) {
    // 閉包  將option值提早植入進來
    return this.each(function () {
      var $this = $(this)
      var data = $this.data('bs.tab') //先取一下bs.tab   這一步是爲了緩存Tab對象的，這是必須的，不可能點擊一下tab就new Tab(this)，
      if (!data) {
        $this.data('bs.tab', (data = new Tab(this))) //若是沒有data，那麼將點擊的a標籤傳入tab,而後把Tab對象賦值給data
      }
      if (typeof option == 'string') data[option]() //若是傳入的是字符串，則執行相應的方法
    })
  }

  var old = $.fn.tab

  $.fn.tab = Plugin
  $.fn.tab.Constructor = Tab

  // TAB NO CONFLICT
  // ===============
  //防衝突代碼，爲了規範，應該加上
  $.fn.tab.noConflict = function () {
    $.fn.tab = old
    return this
  }

  // TAB DATA-API
  // ============
  var clickHandler = function (e) {
    e.preventDefault() //阻止事件冒泡
    Plugin.call($(this), 'show')
  }

  /* $(document)
    .on('click.bs.tab.data-api', '[data-toggle="tab"]', clickHandler)
    .on('click.bs.tab.data-api', '[data-toggle="pill"]', clickHandler) */

  // 使用了屬性選擇器
  $(document).on('click', '[data-toggle="tab"]', clickHandler)
})(jQuery)

# 核心代碼說明

這就是爲何若是a標籤上有data-toggle="tab"屬性，就不須要任何js代碼，若是沒有，就須要本身來調用

tab切換的原理就是，讓以前active的li元素變成非active便可，讓當前點擊的元素變成active便可，tab-pane跟隨tab一塊兒變化

# 手動調用

<script>
  $('#myTabs a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
  })
</script>