bootstrap 3 tabs not working properly

Question

I almost copied the code from their website  The tab is initiated perfectly  and when I click on tabs  new panels are activated  However  the  active  class is not applied to the activated tab  This is the code    lt ul class  nav nav-tabs  gt    lt li data-toggle  tab   data-target   a  class  active  gt  lt a href     gt a lt  a gt  lt  li gt     lt li data-toggle  tab   data-target   b   gt  lt a href     gt b lt  a gt  lt  li gt     lt li data-toggle  tab   data-target   c    gt  lt a href     gt c lt  a gt  lt  li gt   lt  ul gt     lt div class  tab-content  gt     lt div class  tab-pane fade in active  id  a  gt  in tab a  lt  div gt     lt div class  tab-pane fade  id  b  gt in tab b lt  div gt     lt div class  tab-pane fade  id  c  gt in tab c lt  div gt   lt  div gt

User · Answer

Use this for your code   lt ul class  nav nav-tabs  style  margin-top 10em   gt     lt li class  active  data-toggle  tab  gt  lt a href     gt Assign lt  a gt  lt  li gt   lt li data-toggle  tab  gt  lt a href     gt Two lt  a gt  lt  li gt   lt li data-toggle  tab  gt  lt a href     gt Three lt  a gt  lt  li gt

User · Answer

In my case  dynamically generating the sections   the issue was a missing     in href

User · Answer

for some weird reason bootstrap tabs were not working for me until i was using href like -   lt li class  nav-item  gt  lt a class  nav-link  href   a  data-toggle  tab  gt First lt  a gt  lt  li gt    but it started working as soon as i replaced href with data-target like -   lt li class  nav-item  gt  lt a class  nav-link  data-target   a  data-toggle  tab  gt First lt  a gt  lt  li gt

User · Answer

According to the Docs you need to put an id on each link in the header and that link needs to be inside the li which should have no other styles  i e doesn t need all the data-target stuff in the li  Your list has with no data-toggle or id   Your HTML would be like this   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 7 js bootstrap min js  gt  lt  script gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet   gt  x000D   lt ul class  nav nav-tabs  gt  x000D      lt li gt  lt a href   a  data-toggle  tab  gt a lt  a gt  lt  li gt  x000D      lt li gt  lt a href   b  data-toggle  tab  gt b lt  a gt  lt  li gt  x000D      lt li gt  lt a href   c  data-toggle  tab  gt c lt  a gt  lt  li gt  x000D      lt li gt  lt a href   d  data-toggle  tab  gt d lt  a gt  lt  li gt  x000D   lt  ul gt  x000D   x000D   lt div class  tab-content  gt  x000D      lt div class  tab-pane active  id  a  gt AAA lt  div gt  x000D      lt div class  tab-pane  id  b  gt BBB lt  div gt  x000D      lt div class  tab-pane  id  c  gt CCC lt  div gt  x000D      lt div class  tab-pane  id  d  gt DDD lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    And you shouldn t need any Javascript  according to the Docs

User · Answer

When I moved the following lines from the head section to the end of the body section it worked    lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt

User · Answer

Make sure your jquery is inserted BEFORE bootstrap js file    lt script src  jquery min js  type  text javascript  gt  lt  script gt   lt link href  bootstrap min css  rel  stylesheet  type  text css   gt   lt script src  bootstrap min js  type  text javascript  gt  lt  script gt

User · Answer

In my case  I have two elements with the same id  I could not notice the cause of problem for a long time  because the first such element was hidden

User · Answer

One more thing to check for this issue is html tag attribute id  You should check any other html tags in that page have the same id as nav tab id

User · Answer

In my case we were setting the div id as a number and setting the href   123   this did not work   adding a prefix to the id helped   Example   This did not work-   lt li gt   lt a data-toggle  tab  href    i  gt   lt li  gt       lt div class  tab-pane  id    i  gt    This worked    lt li gt  lt a data-toggle  tab  href   prefix i  gt  lt li  gt       lt div class  tab-pane  id   prefix i  gt

User · Answer

When I removed the smooth scroll script  https   github com cferdinandi smooth-scroll   it worked

User · Answer

My problem was that I sillily concluded bootstrap documentation is the latest one  If you are using Bootstrap 4  the necessary working tab markub is  http   v4-alpha getbootstrap com components navs  javascript-behavior      lt ul gt     lt li class  nav-item  gt  lt a class  active  href   a  data-toggle  tab  gt a lt  a gt  lt  li gt     lt li class  nav-item  gt  lt a                href   b  data-toggle  tab  gt b lt  a gt  lt  li gt   lt  ul gt    lt div class  tab-content  gt     lt div class  tab-pane active  id  a  gt a lt  div gt     lt div class  tab-pane         id  b  gt b lt  div gt   lt  div gt

User · Answer

This will work         nav-tabs a   click function           this  tab  show

User · Answer

My problem was with extra  lt  div gt  tag inside the first tab

User · Answer

For anyone struggling with this issue using bootstrap3 use the below classlist  If you ve copy pasted from the DOC  It won t surely work  Becasue of the  show in new version    lt div class  tab-pane fade in active   gt    lt div class  tab-pane fade in   gt

[twitter-bootstrap-3] bootstrap 3 tabs not working properly

Examples related to twitter-bootstrap-3