Bootstrap Pills - Examples & Tutorial

Trang chủ » V Pills » Bootstrap Pills - Examples & Tutorial

Có thể bạn quan tâm

Events

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

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

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

Event type Description
show.mdb.tab This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
shown.mdb.tab This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
hide.mdb.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.mdb.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.
Show code Edit in sandbox
  • JavaScript
const tabEl = document.querySelector('a[data-mdb-pill-init]') tabEl.addEventListener('shown.mdb.tab', (e) => { console.log(e.target) // newly activated tab console.log(e.relatedTarget) // previous active tab })

Từ khóa » V Pills