Bootstrap 3 jquery event for active tab change

Question

I spent an unrealistic amount of time trying to fire a function when the tab changes of the bootstrap 3 tab navbar and literally all suggestions google spat out were wrong did not work   How to go about this   Meta-edit  see comment

User · Answer

This worked for me       nav-pills  gt  li  gt  a   click  function             nav-pills  gt  li active   removeClass  active          this  parent   addClass  active

User · Answer

I use another approach   Just try to find all a where id starts from some substring   JS     a id  v-photos-tab    click function           alert  Handler for  click   called           HTML   lt a class  nav-item nav-link active show   id  v-photos-tab-3a623245-7dc7-4a22-90d0-62705ad0c62b  data-toggle  pill  href   v-photos-3a623245-7dc7-4a22-90d0-62705ad0c62b  role  tab  aria-controls  v-requestbase-photos  aria-selected  true  gt  lt span gt Cool photos lt  span gt  lt  a gt

User · Answer

To add to Mosh Feu answer  if the tabs where created on the fly like in my case  you would use the following code    document  on  shown bs tab    a data-toggle  tab     function  e        var tab     e target       var contentId   tab attr  href           This check if the tab is active     if  tab parent   hasClass  active               console log  the tab with the content id     contentId     is visible          else            console log  the tab with the content id     contentId     is NOT visible                 I hope this helps someone

User · Answer

Thanks to  Gerben s post came to know there are two events show bs tab  before the tab is shown  and shown bs tab  after the tab is shown  as explained in the docs - Bootstrap Tab usage  An additional solution if we re only interested in a specific tab  and maybe add separate functions without having to add an if - else block in one function  is to use the a href selector  maybe along with additional selectors if required       a href   tab target id     on  shown bs tab   function e          console log  shown - after the tab has been shown              or even this one if we want the earlier event     a href   tab target id     on  show bs tab   function e          console log  show - before the new tab has been shown           demo

User · Answer

Eric Saupe knows how to do it   x000D   x000D     a data-toggle  tab     on  shown bs tab   function  e    x000D    var target     e target  attr  href      activated tab x000D    alert target   x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 6 js bootstrap min js  gt  lt  script gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   lt ul id  myTab  class  nav nav-tabs  gt  x000D     lt li class  active  gt  lt a href   home  data-toggle  tab  gt Home lt  a gt  lt  li gt  x000D     lt li class    gt  lt a href   profile  data-toggle  tab  gt Profile lt  a gt  lt  li gt  x000D   lt  ul gt  x000D   lt div id  myTabContent  class  tab-content  gt  x000D     lt div class  tab-pane fade active in  id  home  gt  x000D      home tab  x000D     lt  div gt  x000D     lt div class  tab-pane fade  id  profile  gt  x000D      profile tab  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

function              myTab a last   tab  show            a data-toggle  tab     on  shown bs tab   function  e        var target     e target  attr  href        if   target      messages              alert  ok          else           alert  not ok                the problem is that attr  href   is never empty   Or to compare the  id     some value  and then call the ajax

[jquery] Bootstrap 3 jquery event for active tab change

Examples related to jquery

Examples related to twitter-bootstrap-3