diff --git a/docs/_includes/js/tabs.html b/docs/_includes/js/tabs.html index 570e21e201..f520e0f964 100644 --- a/docs/_includes/js/tabs.html +++ b/docs/_includes/js/tabs.html @@ -115,6 +115,14 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed) {% endhighlight %}

Events

+

When showing a new tab, the events fire in the following order:

+
    +
  1. hide.bs.tab (on the current active tab)
  2. +
  3. show.bs.tab (on the to-be-shown tab)
  4. +
  5. hidden.bs.tab (on the previous active tab, the same one as for the hide.bs.tab event)
  6. +
  7. shown.bs.tab (on the newly-active just-shown tab, the same one as for the show.bs.tab event)
  8. +
+

If no tab was already active, then the hide.bs.tab and hidden.bs.tab events will not be fired.

@@ -134,19 +142,19 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed) - + - +
hide.bs.tabThis event fires immediately when a new tab is to be shown and before the show.bs.tab event. Use event.relatedTarget to target the new tab.This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use event.target and event.relatedTarget to target the current active tab and the new soon-to-be-active tab, respectively.
hidden.bs.tabThis event fires after a new tab is shown and before the shown.bs.tab event. Use event.relatedTarget to target the new tab.This event fires after a new tab is shown (and thus the previous active tab is hidden). Use event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively.
{% highlight js %} $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { - e.target // activated tab - e.relatedTarget // previous tab + e.target // newly activated tab + e.relatedTarget // previous active tab }) {% endhighlight %}