Twitter Bootstrap Tabs Go to Specific Tab on Page Reload or Hyperlink

Question

I m developing a web page in which I m using Twitter s Bootstrap Framework and their Bootstrap Tabs JS  It works great except for a few minor issues  one of which is I do not know how go directly to  a specific tab from an external link  For example    lt a href  facility php home  gt Home lt  a gt   lt a href  facility php notes  gt Notes lt  a gt    should go to the Home tab and the Notes tab respectively when clicked on the links from an external page

User · Answer

If it matters to anybody  the following code is small and works flawless  to get a single hash value from the URL and show that    lt script gt      window onload   function              let url   document location toString            let splitHash   url split               document getElementById splitHash 1   click            lt  script gt    what it does is it retrieves the id and fires the click event  Simple

User · Answer

Here is what i did  really simple  and provided your tab links have an ID associated with them you can get the href attribute and pass that over to the function that shows the tab contents    lt script type  text javascript  gt          jQuery document  ready function                 var hash   document location hash              var prefix    tab                if  hash                    var tab   jQuery hash replace prefix      attr  href                    jQuery   nav-tabs a href   tab      tab  show                                       lt  script gt    Then in your url you can add the hash as something like   tab tab1  the  tab   part is removed from the hash itself so the ID of the actual tab link in the nav-tabs  tabid1  is placed after this  so your url would look something like  www mydomain com index php tab tabid1   This works perfect for me and hope it helps someone else  -

User · Answer

I had to modify some bits for this to work for me  I am using Bootstrap 3 and jQuery 2     Javascript to enable link to tab var hash   document location hash  var prefix        if  hash        hash   hash replace prefix          var hashPieces   hash split           activeTab       role  tablist   a href     hashPieces 0              activeTab  amp  amp  activeTab tab  show          Change hash for page-reload     role  tablist   a   on  shown bs tab   function  e        window location hash   e target hash replace            prefix

User · Answer

This code selects the right tab depending on the  hash and adds the right  hash when a tab is clicked   this uses jquery   In Coffeescript      document  ready - gt      if location hash                  a href    location hash       tab  show           a data-toggle  tab     on  shown    e  - gt          location hash     e target  attr  href   substr 1    or in JS      document  ready function         if  location hash            a href      location hash         tab  show        return    a data-toggle  tab     on  shown   function e          return location hash     e target  attr  href   substr 1

User · Answer

Tried couple of ways discussed above and end up with following working solution  just copy and paste in your editor to try  To test just change hash to inbox  outbox  compose in url and hit enter key    lt html gt       lt head gt           lt link type  text css  rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 0 0 css bootstrap min css    gt           lt script src  https   code jquery com jquery-2 2 0 min js  gt  lt  script gt           lt script src  https   maxcdn bootstrapcdn com bootstrap 3 0 0 js bootstrap min js  gt  lt  script gt       lt  head gt       lt body gt           lt div class  container body-content  gt               lt ul class  nav nav-tabs  gt                   lt li class  active  gt  lt a data-toggle  tab  href   inbox  gt Inbox lt  a gt  lt  li gt                   lt li gt  lt a data-toggle  tab  href   outbox  gt Outbox lt  a gt  lt  li gt                   lt li gt  lt a data-toggle  tab  href   compose  gt Compose lt  a gt  lt  li gt               lt  ul gt               lt div class  tab-content  gt                   lt div id  inbox  class  tab-pane fade in active  gt                      Inbox Content                  lt  div gt                   lt div id  outbox  class  tab-pane fade  gt                      Outbox Content                  lt  div gt                   lt div id  compose  class  tab-pane fade  gt                      Compose Content                  lt  div gt               lt  div gt           lt  div gt           lt script gt                function                      var hash   window location hash                  hash  amp  amp     ul nav a href      hash         tab  show                             lt  script gt       lt  body gt   lt  html gt    Hope this will save your time

User · Answer

This is my solution to handle nested tabs   I just added a function to check if the active tab has a parent tab to be activated  This is the function   function activateParentTab tab            tab-pane   each function             var cur tab     this           if     this  find       tab  length  gt  0                     nav-tabs a href     cur tab attr  id         tab  show                return false                        And can be called like this  Based on  flynfish s solution    var hash   document location hash  var prefix       if  hash            nav-tabs a href   hash replace prefix          tab  show        activateParentTab hash          Change hash for page-reload     nav-tabs a   on  shown   function  e        window location hash   e target hash replace            prefix         This solution works pretty fine to me at the moment  Hope this can be useful for someone else

User · Answer

Just insert this code on your page    x000D   x000D    function    x000D    var hash   window location hash  x000D    hash  amp  amp     ul nav a href      hash         tab  show    x000D   x000D        nav-tabs a   click function  e    x000D        this  tab  show    x000D      var scrollmem      body   scrollTop    x000D      window location hash   this hash  x000D         html body   scrollTop scrollmem   x000D        x000D      x000D   x000D   x000D

User · Answer

I would suggest you use the code provided by Bootstrap authors on their issue tracker on GitHub   var hash   location hash     hashPieces   hash split          activeTab       href     hashPieces 0          activeTab  amp  amp  activeTab tab  show      You can find on the link to the issue more information about why they didn t choose to support that

User · Answer

Here is my solution to the problem  a bit late perhaps  But it could maybe help others     Javascript to enable link to tab var hash   location hash replace                  means starting  meaning only match the first hash if  hash            nav-tabs a href  quot      hash     quot     tab  show           Change hash for page-reload     nav-tabs a   on  shown bs tab   function  e        window location hash   e target hash

User · Answer

While the JavaScript solution provided may work  I went a slightly different way that requires no additional JavaScript  but does require logic in your view   You create a link with a standard URL parameter  like    lt a href    http   link to yourpage activeTab home  gt My Link lt  a gt    Then you simply detect the value of activeTab to write  class  active   in the appropriate  lt li gt   Pseudocode  implement accordingly in your language    Note I ve set  home  tab as a default active if no parameter provided in this example    activetabhome    params activeTab is null or params activeTab     home      class  active          activetabprofile    params activeTab     profile      class  active           lt li  activetabhome gt  lt a href   home  gt Home lt  a gt  lt  li gt   lt li  activetabprofile gt  lt a href   profile  gt Profile lt  a gt  lt  li gt

User · Answer

This works in Bootstrap 3 and improves dubbe and flynfish  s 2 top answers by integrating GarciaWebDev  s answer as well  which allows for url parameters after the hash and is straight from Bootstrap authors on the github issue tracker       Javascript to enable link to tab var hash   document location hash  var prefix    tab     if  hash        hash   hash replace prefix          var hashPieces   hash split           activeTab       nav-tabs a href     hashPieces 0              activeTab  amp  amp  activeTab tab  show           Change hash for page-reload     nav-tabs a   on  shown   function  e        window location hash   e target hash replace            prefix

User · Answer

you could trigger a click event on the corresponding tab link     document  ready function       if window location hash                   a href      window location hash         click

User · Answer

Building on Demircan Celebi s solution  I wanted the tab to open when modifying the url and open tab without having to reload the page from the server    lt script type  text javascript  gt        function             openTabHash       for the initial page load         window addEventListener  hashchange   openTabHash  false      for later changes to url               function openTabHash                 console log  openTabHash               Javascript to enable link to tab         var url   document location toString            if  url match                         nav-tabs a href     url split      1        tab  show                            With HTML5 history API  we can easily prevent scrolling              nav-tabs a   on  shown bs tab   function  e                if history pushState                    history pushState null  null  e target hash                  else                   window location hash   e target hash    Polyfill for old browsers                                 lt  script gt

User · Answer

I just had this issue  but needed to handle multiple tab levels  The code is rather ugly  see comments   but does its job  https   gist github com JensRantil 4721860 Hopefully someone else will find it useful  and feel free to propose better solutions

User · Answer

I know this thread is very old  but I ll leave here my own implementation     function           some initialization code    addTabBehavior          Initialize events and change tab on first page load  function addTabBehavior           nav-tabs a   on  show bs tab   e   gt        window location hash   e target hash replace  nav-                 window  on  popstate   e   gt        changeTab           changeTab         Change the current tab and URL hash  if don t have any hash    in URL  so activate the first tab and update the URL hash  function changeTab       const hash   getUrlHash      if  hash            nav-tabs a href   nav-  hash      tab  show       else           nav-tabs a   first   tab  show             Get the hash from URL  Ex  www example com  tab1 function getUrlHash       return window location hash slice 1      Note that I m using a nav- class prefix to nav links

User · Answer

Combining peices from other answers  here is a solution that can open many levels of nested tabs      opens all tabs down to the specified tab var hash   location hash split      0   if hash      var  link       href     hash           var parents    link parents   tab-pane   get        parents reverse    each function             href      this id        tab  show              link tab  show

User · Answer

I came up with a solution that uses the url hash or localStorage depending on the availability of the latter with below code     function          document  on  shown bs tab    a data-toggle  tab     function  e            localStorage setItem  activeTab     e target  attr  href                 var hash   window location hash      var activeTab   localStorage getItem  activeTab         if hash                 project-tabs  a href      hash         tab  show            else if  activeTab               project-tabs a href      activeTab         tab  show

User · Answer

flynfish    Ztyx solution that I use for nested tabs       handleTabLinks         function handleTabLinks             if window location hash                      window location hash   window location hash                           var hash   window location hash split      1           var prefix                var hpieces   hash split               for  var i 0 i lt hpieces length i                  var domelid   hpieces i  replace prefix                  var domitem      a href      domelid      data-toggle tab                 if  domitem length  gt  0                    domitem tab  show                                       a data-toggle tab    on  shown   function  e                if    this  hasClass  nested                      var nested   window location hash split                       window location hash   nested 0          e target hash split      1                 else                   window location hash   e target hash replace            prefix                                     childrens should have class  nested

User · Answer

This is an improved implementation of dubbe s solution which prevent scrolling      Javascript to enable link to tab var url   document location toString    if  url match                 nav-tabs a href     url split      1        tab  show            With HTML5 history API  we can easily prevent scrolling      nav-tabs a   on  shown bs tab   function  e        if history pushState            history pushState null  null  e target hash          else           window location hash   e target hash    Polyfill for old browsers

User · Answer

function      var hash   window location hash    hash  amp  amp     ul nav a href      hash         tab  show          This code from http   github com twitter bootstrap issues 2415 issuecomment-4450768 worked for me perfectly

User · Answer

I am not a big fan of if   else  so I took a simpler approach     document  ready function event           ul nav nav-tabs a first   tab  show       Select first tab        ul nav nav-tabs a href     window location hash        tab  show       Select tab by name if provided in location hash        ul nav nav-tabs a data-toggle  tab     on  shown   function  event          Update the location hash to current tab         window location hash  event target hash                Pick a default tab  usually the first  Switch to tab  if such an element is indeed present  let jQuery handle it   Nothing happens if a wrong hash is specified  Optional  Update the hash if another tab is manually chosen   Doesn t address scrolling to requested hash  but should it

User · Answer

UPDATE  For Bootstrap 3  change  on  shown        to  on  shown bs tab            This is based off of  dubbe answer and this SO accepted answer   It handles the issue with window scrollTo 0 0  not working correctly  The problem is that when you replace the url hash on tab shown  the browser will scroll to that hash since its an element on the page  To get around this  add a prefix so the hash doesn t reference an actual page element     Javascript to enable link to tab var hash   document location hash  var prefix    tab    if  hash            nav-tabs a href    hash replace prefix           tab  show           Change hash for page-reload     nav-tabs a   on  shown   function  e        window location hash   e target hash replace            prefix         Example of use  If you have tab-pane with id  mytab  you need to put your link like this    lt a href  yoursite com  tab mytab  gt Go to Specific Tab  lt  a gt

User · Answer

I make sth like this for links with ajax      e g  test com   test3  but you can modify it whatever you like    document  ready function             let hash   document location hash         let prefix                   change hash url on page reload        if  hash                 nav-tabs a href     hash replace prefix            tab  show                         change hash url on switch tab            nav-tabs a   on  shown bs tab   function  e              window location hash   e target hash replace            prefix                     Example with simple page on Github here

User · Answer

For Bootstrap 3       nav-tabs a href       tabID         tab  show      https   jsfiddle net DTcHh 6638

[javascript] Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink

Examples related to javascript

Examples related to html

Examples related to tabs

Examples related to twitter-bootstrap