Twitter Bootstrap tabs not working when I click on them nothing happens

Question

I am trying to implement Twitter Bootstrap tabs in the following code  but it does not seem to work  The tabs get displayed  but when I click on them nothing happens  Below is the only code I am using  All the other CSS JS scripts are copied from Twitter Bootstrap framework    lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt   lt  -- Le styles -- gt   lt link href  assets twitterbootstrap css bootstrap css  rel  stylesheet  gt   lt link href  assets twitterbootstrap css bootstrap-responsive css  rel  stylesheet  gt    lt  head gt    lt body data-spy  scroll  data-target   subnav  data-offset  50  gt    lt div class  container  gt    lt  -------- gt   lt div id  content  gt       lt ul class  nav nav-tabs  data-tabs  tabs  gt           lt li class  active  gt  lt a href   red  gt Red lt  a gt  lt  li gt           lt li gt  lt a href   orange  gt Orange lt  a gt  lt  li gt           lt li gt  lt a href   yellow  gt Yellow lt  a gt  lt  li gt           lt li gt  lt a href   green  gt Green lt  a gt  lt  li gt           lt li gt  lt a href   blue  gt Blue lt  a gt  lt  li gt       lt  ul gt       lt div id  my-tab-content  class  tab-content  gt           lt div class  tab-pane active  id  red  gt               lt h1 gt Red lt  h1 gt               lt p gt red red red red red red lt  p gt           lt  div gt           lt div class  tab-pane  id  orange  gt               lt h1 gt Orange lt  h1 gt               lt p gt orange orange orange orange orange lt  p gt           lt  div gt           lt div class  tab-pane  id  yellow  gt               lt h1 gt Yellow lt  h1 gt               lt p gt yellow yellow yellow yellow yellow lt  p gt           lt  div gt           lt div class  tab-pane  id  green  gt               lt h1 gt Green lt  h1 gt               lt p gt green green green green green lt  p gt           lt  div gt           lt div class  tab-pane  id  blue  gt               lt h1 gt Blue lt  h1 gt               lt p gt blue blue blue blue blue lt  p gt           lt  div gt       lt  div gt   lt  div gt    lt script type  text javascript  gt      jQuery document  ready function                   tabs   tabs             lt  script gt       lt  div gt   lt  -- container -- gt    lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 5 jquery js  gt  lt  script gt   lt script type  text javascript  src  assets twitterbootstrap js bootstrap js  gt  lt  script gt   lt  body gt   lt  html gt

User · Answer

I just fixed this issue by adding data-toggle  tab  element in anchor tag    lt div class  container  gt    lt  -------- gt     lt div id  content  gt       lt ul class  nav nav-tabs  gt   lt li class  active  gt  lt a data-toggle  tab  href   red  gt Red lt  a gt  lt  li gt   lt li gt  lt a data-toggle  tab   href   orange  gt Orange lt  a gt  lt  li gt   lt li gt  lt a data-toggle  tab  href   yellow  gt Yellow lt  a gt  lt  li gt   lt li gt  lt a data-toggle  tab  href   green  gt Green lt  a gt  lt  li gt   lt li gt  lt a data-toggle  tab  href   blue  gt Blue lt  a gt  lt  li gt   lt  ul gt   lt div class  tab-content  gt   lt div class  tab-pane active  id  red  gt       lt h1 gt Red lt  h1 gt       lt p gt red red red red red red lt  p gt   lt  div gt   lt div class  tab-pane  id  orange  gt       lt h1 gt Orange lt  h1 gt       lt p gt orange orange orange orange orange lt  p gt   lt  div gt   lt div class  tab-pane  id  yellow  gt       lt h1 gt Yellow lt  h1 gt       lt p gt yellow yellow yellow yellow yellow lt  p gt   lt  div gt   lt div class  tab-pane  id  green  gt       lt h1 gt Green lt  h1 gt       lt p gt green green green green green lt  p gt   lt  div gt   lt div class  tab-pane  id  blue  gt       lt h1 gt Blue lt  h1 gt       lt p gt blue blue blue blue blue lt  p gt    and  added the following in head section      http   code jquery com jquery-1 7 1 js

User · Answer

Just copy the script tag for adding the bootstrap js from the head section to the end of the body  Then everything should work fine even without the scripts to activate the tabs

User · Answer

i had the same problem until i downloaded bootstrap-tab js and included it in my script  download from here https   code google com p fusionleaf source browse webroot fusionleaf com www inc bootstrap js bootstrap-tab js r 82aacd63ee1f7f9a15ead3574fe2c3f45b5c1027  include the bootsrap-tab js in the  just below the jquery   lt script type  text javascript  src  bootstrap js bootstrap-tab js  gt  lt  script gt    Final Code Looked like this     lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt   lt link href  bootstrap css bootstrap css  rel  stylesheet  gt   lt script type  text javascript  src  libraries jquery js  gt  lt  script gt   lt script type  text javascript  src  bootstrap js bootstrap js  gt  lt  script gt   lt script type  text javascript  src  bootstrap js bootstrap-tab js  gt  lt  script gt   lt  head gt    lt body gt    lt div class  container  gt    lt  -------- gt   lt div id  content  gt       lt ul id  tabs  class  nav nav-tabs  data-tabs  tabs  gt           lt li class  active  gt  lt a href   red  data-toggle  tab  gt Red lt  a gt  lt  li gt           lt li gt  lt a href   orange  data-toggle  tab  gt Orange lt  a gt  lt  li gt           lt li gt  lt a href   yellow  data-toggle  tab  gt Yellow lt  a gt  lt  li gt           lt li gt  lt a href   green  data-toggle  tab  gt Green lt  a gt  lt  li gt           lt li gt  lt a href   blue  data-toggle  tab  gt Blue lt  a gt  lt  li gt       lt  ul gt       lt div id  my-tab-content  class  tab-content  gt           lt div class  tab-pane active  id  red  gt               lt h1 gt Red lt  h1 gt               lt p gt red red red red red red lt  p gt           lt  div gt           lt div class  tab-pane  id  orange  gt               lt h1 gt Orange lt  h1 gt               lt p gt orange orange orange orange orange lt  p gt           lt  div gt           lt div class  tab-pane  id  yellow  gt               lt h1 gt Yellow lt  h1 gt               lt p gt yellow yellow yellow yellow yellow lt  p gt           lt  div gt           lt div class  tab-pane  id  green  gt               lt h1 gt Green lt  h1 gt               lt p gt green green green green green lt  p gt           lt  div gt           lt div class  tab-pane  id  blue  gt               lt h1 gt Blue lt  h1 gt               lt p gt blue blue blue blue blue lt  p gt           lt  div gt       lt  div gt   lt  div gt     lt script type  text javascript  gt      jQuery document  ready function                   tabs   tab             lt  script gt       lt  div gt   lt  -- container -- gt     lt script type  text javascript  src  bootstrap js bootstrap js  gt  lt  script gt    lt  body gt   lt  html gt

User · Answer

For me  the problem was that I wasn t including bootstrap min css  I was only including bootstrap-responsive min css

User · Answer

The key elements include    the class  nav nav-tabs  and data-tabs  tabs  of ul the data-toggle  tab  and href   orange  of the a the class  tab-content  of the div of the content the class  tab-pane  and id of the div of the items   The complete code is as below    lt ul class  nav nav-tabs  data-tabs  tabs  gt       lt li class  active  gt  lt a data-toggle  tab  href   red  gt Red lt  a gt  lt  li gt       lt li gt  lt a data-toggle  tab  href   orange  gt Orange lt  a gt  lt  li gt       lt li gt  lt a data-toggle  tab  href   yellow  gt Yellow lt  a gt  lt  li gt       lt li gt  lt a data-toggle  tab  href   green  gt Green lt  a gt  lt  li gt       lt li gt  lt a data-toggle  tab  href   blue  gt Blue lt  a gt  lt  li gt   lt  ul gt   lt div class  tab-content  gt       lt div class  tab-pane active  id  red  gt           lt h1 gt Red lt  h1 gt           lt p gt red red red red red red lt  p gt       lt  div gt       lt div class  tab-pane  id  orange  gt           lt h1 gt Orange lt  h1 gt           lt p gt orange orange orange orange orange lt  p gt       lt  div gt       lt div class  tab-pane  id  yellow  gt           lt h1 gt Yellow lt  h1 gt           lt p gt yellow yellow yellow yellow yellow lt  p gt       lt  div gt       lt div class  tab-pane  id  green  gt           lt h1 gt Green lt  h1 gt           lt p gt green green green green green lt  p gt       lt  div gt       lt div class  tab-pane  id  blue  gt           lt h1 gt Blue lt  h1 gt           lt p gt blue blue blue blue blue lt  p gt       lt  div gt   lt  div gt

User · Answer

I tried the codes from bootstrap s document as follows    lt  doctype html gt   lt html lang  en  gt   lt head gt     lt meta charset  utf-8  gt     lt title gt tab demo lt  title gt     lt link rel  stylesheet  href  bootstrap css  gt   lt  head gt   lt body gt   lt div class  span9  gt       lt div class  tabbable  gt   lt  -- Only required for left right tabs -- gt         lt ul class  nav nav-tabs  gt           lt li class  active  gt  lt a href   tab1  data-toggle  tab  gt Section 1 lt  a gt  lt  li gt           lt li gt  lt a href   tab2  data-toggle  tab  gt Section 2 lt  a gt  lt  li gt         lt  ul gt         lt div class  tab-content  gt           lt div class  tab-pane active  id  tab1  gt             lt p gt I m in Section 1  lt  p gt           lt  div gt           lt div class  tab-pane  id  tab2  gt             lt p gt Howdy  I m in Section 2  lt  p gt           lt  div gt         lt  div gt       lt  div gt   lt  div gt    lt script src  jquery min js  gt  lt  script gt   lt script src  bootstrap js  gt  lt  script gt   lt  body gt   lt  html gt    and it works  But when I switch these two  lt script src    gt  s postion  it do not work  So please remember to load your jquery script before bootstrap js

User · Answer

I have the same problem  but above some answers might be tricky for me   I found the other answer maybe solve your question Twitter Bootstrap Js  tabs  popups  dropdown  not working in Drupal     place jquery js before bootstrap tab js

User · Answer

You re missing the data-toggle  tab  data-tag on your menu urls so your scripts can t tell where your tab switches are   HTML   lt ul class  nav nav-tabs  data-tabs  tabs  gt       lt li class  active  gt  lt a data-toggle  tab  href   red  gt Red lt  a gt  lt  li gt       lt li gt  lt a data-toggle  tab  href   orange  gt Orange lt  a gt  lt  li gt       lt li gt  lt a data-toggle  tab  href   yellow  gt Yellow lt  a gt  lt  li gt       lt li gt  lt a data-toggle  tab  href   green  gt Green lt  a gt  lt  li gt       lt li gt  lt a data-toggle  tab  href   blue  gt Blue lt  a gt  lt  li gt   lt  ul gt

User · Answer

You need to add tabs plugin to your code   lt script type  text javascript  src  assets twitterbootstrap js bootstrap-tab js  gt  lt  script gt    Well  it didn t work  I made some tests and it started working when    moved  updated to 1 7  jQuery script to  lt head gt  section  added data-toggle  tab  to links and id for  lt ul gt  tab element changed     tabs   tabs    to     tabs   tab    and some other things that shouldn t matter   Here s a code   lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt   lt  -- Le styles -- gt   lt link href     bootstrap css bootstrap css  rel  stylesheet  gt   lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 7 jquery js  gt  lt  script gt   lt  head gt    lt body gt    lt div class  container  gt    lt  -------- gt   lt div id  content  gt       lt ul id  tabs  class  nav nav-tabs  data-tabs  tabs  gt           lt li class  active  gt  lt a href   red  data-toggle  tab  gt Red lt  a gt  lt  li gt           lt li gt  lt a href   orange  data-toggle  tab  gt Orange lt  a gt  lt  li gt           lt li gt  lt a href   yellow  data-toggle  tab  gt Yellow lt  a gt  lt  li gt           lt li gt  lt a href   green  data-toggle  tab  gt Green lt  a gt  lt  li gt           lt li gt  lt a href   blue  data-toggle  tab  gt Blue lt  a gt  lt  li gt       lt  ul gt       lt div id  my-tab-content  class  tab-content  gt           lt div class  tab-pane active  id  red  gt               lt h1 gt Red lt  h1 gt               lt p gt red red red red red red lt  p gt           lt  div gt           lt div class  tab-pane  id  orange  gt               lt h1 gt Orange lt  h1 gt               lt p gt orange orange orange orange orange lt  p gt           lt  div gt           lt div class  tab-pane  id  yellow  gt               lt h1 gt Yellow lt  h1 gt               lt p gt yellow yellow yellow yellow yellow lt  p gt           lt  div gt           lt div class  tab-pane  id  green  gt               lt h1 gt Green lt  h1 gt               lt p gt green green green green green lt  p gt           lt  div gt           lt div class  tab-pane  id  blue  gt               lt h1 gt Blue lt  h1 gt               lt p gt blue blue blue blue blue lt  p gt           lt  div gt       lt  div gt   lt  div gt     lt script type  text javascript  gt      jQuery document  ready function                   tabs   tab             lt  script gt       lt  div gt   lt  -- container -- gt     lt script type  text javascript  src     bootstrap js bootstrap js  gt  lt  script gt    lt  body gt   lt  html gt

User · Answer

Actually  there is another easy way to do it  It works for me but I m not sure for you guys  The key thing here  is just adding the FADE in each  tab-pane  and it will works  Besides  you don t even need to script function or whatever version of jQuery  Here is my code   hope it will works for you all    lt div class  tab-pane fade  id  Customer  gt       lt table class  table table-hover table-bordered  gt           lt tr gt               lt th width  40   gt Contact Person lt  th gt               lt td gt  lt  php echo  event  Event    e contact person      gt  lt  td gt           lt  tr gt       lt  table gt   lt  div gt   lt div class  tab-pane fade  id  Delivery  gt       lt table class  table table-hover table-bordered  gt           lt tr gt               lt th width  40   gt Time Arrive Warehouse Start lt  th gt               lt td gt  lt  php echo  event  Event    e time arrive WH start      gt  lt  td gt           lt  tr gt       lt  table gt   lt  div gt

User · Answer

Since i m working with Bootstrap Javascript Modules instead of loading the entire Bootstrap Javascript  my tabs were not working because i forgot to load load include  the node modules bootstrap js tab js file     After including it  it worked     Good Luck

User · Answer

This solved it when none of the other examples did       myTab a   click function  e      e preventDefault        this  tab  show

User · Answer

Had a problem with Bootstrap tabs recently following their online guidelines  but there s currently an error in their markup example data-tabs  tabs  is missing on  lt ul gt  element  Without it using data-toggle on links doesn t work

[html] Twitter Bootstrap tabs not working: when I click on them nothing happens

Examples related to html

Examples related to twitter-bootstrap