Bootstrap tab activation with JQuery

Question

I have the following code   lt ul class  quot nav nav-tabs quot  gt       lt li gt  lt a href  quot  aaa quot  data-toggle  quot tab quot  gt AAA lt  a gt  lt  li gt       lt li gt  lt a href  quot  bbb quot  data-toggle  quot tab quot  gt BBB lt  a gt  lt  li gt       lt li gt  lt a href  quot  ccc quot  data-toggle  quot tab quot  gt CCC lt  a gt  lt  li gt   lt  ul gt   lt div class  quot tab-content quot  id  quot tabs quot  gt       lt div class  quot tab-pane quot  id  quot aaa quot  gt    Content    lt  div gt       lt div class  quot tab-pane quot  id  quot bbb quot  gt    Content    lt  div gt       lt div class  quot tab-pane quot  id  quot ccc quot  gt    Content    lt  div gt   lt  div gt   And the following script    document  ready function        activaTab  aaa         function activaTab tab           tab-pane a href  quot      tab     quot     tab  show        In this case when the page is ready  the second tab will be activated but I always get a JavaScript error in the line     tab-pane a href  quot      tab     quot     tab    Can anyone help me  please

User · Answer

Perform a click on the link to the tab anchor whenever the page is ready i.e.

$('a[href="' + window.location.hash + '"]').trigger('click');

Or in vanilla JavaScript

document.querySelector('a[href="' + window.location.hash + '"]').click();

User · Answer

why not select active tab first then active the selected tab content          1  Add class  active  to the  lt  li   element of tab first          2  then use set  active  class to selected div          document  ready  function            SelectTab 1     or use other method  to set active class to tab         ShowInitialTabContent                 function SelectTab tabindex                    nav-tabs li    removeClass  active                nav-tabs li   eq tabindex  addClass  active               tabindex start at 0            function FindActiveDiv                   var DivName       nav-tabs  active a   attr  href              return DivName            function RemoveFocusNonActive                     nav-tabs  a   not   active   blur                to  gt   remove   hover  focus            function ShowInitialTabContent                 RemoveFocusNonActive            var DivName   FindActiveDiv            if  DivName                          DivName  addClass  active

User · Answer

Add an id attribute to a html tag   lt ul class  nav nav-tabs  gt       lt li gt  lt a href   aaa  data-toggle  tab  id  tab aaa  gt AAA lt  a gt  lt  li gt       lt li gt  lt a href   bbb  data-toggle  tab  id  tab bbb  gt BBB lt  a gt  lt  li gt       lt li gt  lt a href   ccc  data-toggle  tab  id  tab ccc  gt CCC lt  a gt  lt  li gt   lt  ul gt   lt div class  tab-content  id  tabs  gt       lt div class  tab-pane  id  aaa  gt    Content    lt  div gt       lt div class  tab-pane  id  bbb  gt    Content    lt  div gt       lt div class  tab-pane  id  ccc  gt    Content    lt  div gt   lt  div gt    Then using JQuery       tab aaa   tab  show

User · Answer

This one is quite straightforward from w3schools  https   www w3schools com bootstrap bootstrap ref js tab asp     Select tab by name     nav-tabs a href   home     tab  show       Select first tab     nav-tabs a first   tab  show        Select last tab     nav-tabs a last   tab  show        Select fourth tab  zero-based      nav-tabs li eq 3  a   tab  show

User · Answer

Having just struggled with this - I ll explain my situation   I have my tabs within a bootstrap modal and set the following on load  pre the modal being triggered        subMenu li first-child a   tab  show     Whilst the tab was selected the actual pane wasn t visible  As such you need to add active class to the pane as well       profile   addClass  active      In my case the pane had  profile  but this could have easily been  pane first-child  which then displayed the correct pane

User · Answer

lt div class  tabbable  gt   lt ul class  nav nav-tabs  gt       lt li class  active  gt  lt a href   aaa  data-toggle  tab  gt AAA lt  a gt  lt  li gt       lt li gt  lt a href   bbb  data-toggle  tab  gt BBB lt  a gt  lt  li gt       lt li gt  lt a href   ccc  data-toggle  tab  gt CCC lt  a gt  lt  li gt   lt  ul gt   lt div class  tab-content  id  tabs  gt       lt div class  tab-pane fade active in  id  aaa  gt    Content    lt  div gt       lt div class  tab-pane  id  bbb  gt    Content    lt  div gt       lt div class  tab-pane  id  ccc  gt    Content    lt  div gt   lt  div gt   lt  div gt       Add active class to any li element you want to be active after page load  And also adding active class to content div is needed  fade in classes are useful for a smooth transition

User · Answer

Applying a selector from the  nav-tabs seems to be working  See this demo     document  ready function        activaTab  aaa         function activaTab tab           nav-tabs a href       tab         tab  show         I would prefer  codedme s answer  since if you know which tab you want prior to page load  you should probably change the page html and not use JS for this particular task   I tweaked the demo for his answer  as well    If this is not working for you  please specify your setting - browser  environment  etc

[javascript] Bootstrap tab activation with JQuery

Examples related to javascript

Examples related to jquery

Examples related to twitter-bootstrap