Bootstrap 3 Keep selected tab on page refresh

Question

I am trying to keep selected tab active on refresh with Bootstrap 3  Tried and checked with some question already been asked here but none of work for me  Don t know where I am wrong  Here is my code  HTML   lt  -- tabs link -- gt   lt ul class  nav nav-tabs  id  rowTab  gt       lt li class  active  gt  lt a href   personal-info  data-toggle  tab  gt Personal Information lt  a gt  lt  li gt       lt li gt  lt a href   Employment-info  data-toggle  tab  gt Employment Information lt  a gt  lt  li gt       lt li gt  lt a href   career-path  data-toggle  tab  gt Career Path lt  a gt  lt  li gt       lt li gt  lt a href   warnings  data-toggle  tab  gt Warning lt  a gt  lt  li gt   lt  ul gt   lt  -- end  tabs link -- gt    lt div class  tab-content  gt       lt div class  tab-pane active  id  personal-info  gt          tab data here         lt  div gt        lt div class  tab-pane  id  Employment-info  gt          tab data here         lt  div gt        lt div class  tab-pane  id  career-path  gt          tab data here         lt  div gt        lt div class  tab-pane  id  warnings  gt          tab data here         lt  div gt   lt  div gt    Javascript      tab     rowTab a first   tab  show       for bootstrap 3 use  shown bs tab  instead of  shown  in the next line    a data-toggle  tab     on  shown bs tab   function  e      save the latest tab  use cookies if you like  em better  localStorage setItem  selectedTab     e target  attr  id            go to the latest tab  if it exists  var selectedTab   localStorage getItem  selectedTab    if  selectedTab            selectedTab  tab  show

User · Answer

There is a solution after reloading the page and keeping the expected tab as selected.

Suppose after saving data the redirected url is : my_url#tab_2

Now through the following script your expected tab will remain selected.

$(document).ready(function(){
    var url = document.location.toString();
    if (url.match('#')) {
        $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
        $('.nav-tabs a').removeClass('active');
    }
});

User · Answer

I tried this and it works    Please replace this with the pill or tab you are using        jQuery document  ready function             jQuery  a data-toggle  pill     on  show bs tab   function e                localStorage setItem  activeTab   jQuery e target  attr  href                             Here  save the index to which the tab corresponds  You can see it             in the chrome dev tool          var activeTab   localStorage getItem  activeTab                In the console you will be shown the tab where you made the last             click and the save to  activeTab   I leave the console for you to             see  And when you refresh the browser  the last one where you             clicked will be active          console log activeTab            if  activeTab               jQuery  a href      activeTab         tab  show                        I hope it would help somebody   Here is the result  https   jsfiddle net neilbannet ego1ncr5 5

User · Answer

This one use HTML5 localStorage to store active tab     a data-toggle  tab     on  shown bs tab   function e        localStorage setItem  activeTab     e target  attr  href         var activeTab   localStorage getItem  activeTab    if  activeTab           navtab-container a href      activeTab         tab  show        ref  http   www tutorialrepublic com faq how-to-keep-the-current-tab-active-on-page-reload-in-bootstrap php https   www w3schools com bootstrap bootstrap ref js tab asp

User · Answer

A mix between others answers    No jump on click Save on location hash Save on localStorage  e g  for form submit  Just copy amp paste     if  location hash         a href       location hash          tab  show      var activeTab   localStorage getItem  activeTab    if  activeTab         a href      activeTab         tab  show          body   on  click    a data-toggle   tab      function  e      e preventDefault     var tab name   this getAttribute  href     if  history pushState        history pushState null  null  tab name        else       location hash   tab name       localStorage setItem  activeTab   tab name       this  tab  show      return false        window  on  popstate   function        var anchor   location hash           a data-toggle   tab      first   attr  href         a href       anchor          tab  show

User · Answer

Xavi s code was allmost fully working  But when navigating to another page  submitting a form  then being redirected to the page with my tabs was not loading the saved tab at all   localStorage to the rescue  slightly changed Nguyen s code       a data-toggle  tab     click function  e        e preventDefault          this  tab  show            a data-toggle  tab     on  shown bs tab   function  e        var id     e target  attr  href        localStorage setItem  selectedTab   id       var selectedTab   localStorage getItem  selectedTab    if  selectedTab    null           a data-toggle  tab   href      selectedTab         tab  show

User · Answer

I prefer storing the selected tab in the hashvalue of the window  This also enables sending links to colleagues  who than see  the same  page  The trick is to change the hash of the location when another tab is selected  If you already use   in your page  possibly the hash tag has to be split  In my app  I use     as hash value separator    lt ul class  nav nav-tabs  id  myTab  gt     lt li class  active  gt  lt a href   home  gt Home lt  a gt  lt  li gt     lt li gt  lt a href   profile  gt Profile lt  a gt  lt  li gt     lt li gt  lt a href   messages  gt Messages lt  a gt  lt  li gt     lt li gt  lt a href   settings  gt Settings lt  a gt  lt  li gt   lt  ul gt    lt div class  tab-content  gt     lt div class  tab-pane active  id  home  gt home lt  div gt     lt div class  tab-pane  id  profile  gt profile lt  div gt     lt div class  tab-pane  id  messages  gt messages lt  div gt     lt div class  tab-pane  id  settings  gt settings lt  div gt   lt  div gt    JavaScript  has to be embedded after the above in a  lt script gt     lt  script gt  part         myTab a   click function e      e preventDefault        this  tab  show            store the currently selected tab in the hash value    ul nav-tabs  gt  li  gt  a   on  shown bs tab   function e      var id     e target  attr  href   substr 1     window location hash   id          on load of the page  switch to the currently selected tab var hash   window location hash      myTab a href      hash         tab  show

User · Answer

Basing myself on answers provided by Xavi Mart  nez and koppor I came up with a solution that uses the url hash or localStorage depending on the availability of the latter   function rememberTabSelection tabPaneSelector  useHash        var key    selectedTabFor    tabPaneSelector      if get key              tabPaneSelector  find  a href     get key         tab  show           tabPaneSelector  on  click    a data-toggle    function event            set key  this getAttribute  href                   function get key            return useHash   location hash  localStorage getItem key              function set key  value           if useHash              location hash   value          else             localStorage setItem key  value             Usage     document  ready function          rememberTabSelection   rowTab    localStorage          Do Work          It does not keep up with the back button as is the case for Xavi Mart  nez s solution

User · Answer

Using html5 I cooked up this one   Some where on the page    lt h2 id  heading  data-activetab   ViewBag activetab  gt Some random text lt  h2 gt    The viewbag should just contain the id for the page element eg    testing   I created a site js and added the scrip on the page        lt reference path     jquery-2 1 0 js    gt    document  ready    function         var setactive       heading   data  activetab        var a           setactive  addClass  active            Now all you have to do is to add your id s to your navbar  Eg     lt ul class  nav navbar-nav  gt     lt li   id  testing     gt       Html ActionLink  Lalala    MyAction    MyController      lt  li gt   lt  ul gt    All hail the data attribute

User · Answer

For Bootstrap v4 3 1  Try below     document  ready function         var pathname   window location pathname    get the path of current page         navbar-nav  gt  li  gt  a href    pathname       parent   addClass  active

User · Answer

Well  this is already in 2018 but I think it is better late than never  like a title in a TV program   lol  Down here is the jQuery code that I create during my thesis     lt script type  text javascript  gt    document  ready function           a data-toggle  tab     on  show affectedDiv tab   function e            localStorage setItem  activeTab     e target  attr  href                 var activeTab   localStorage getItem  activeTab        if activeTab               myTab a href      activeTab         tab  show               lt  script gt    and here is the code for bootstrap tabs    lt div class  affectedDiv  gt       lt ul class  nav nav-tabs  id  myTab  gt           lt li class  active  gt  lt a data-toggle  tab  href   sectionA  gt Section A lt  a gt  lt  li gt           lt li gt  lt a data-toggle  tab  href   sectionB  gt Section B lt  a gt  lt  li gt           lt li gt  lt a data-toggle  tab  href   sectionC  gt Section C lt  a gt  lt  li gt       lt  ul gt       lt div class  tab-content  gt           lt div id  sectionA  class  tab-pane fade in active  gt               lt h3 gt Section A lt  h3 gt               lt p gt Aliquip placeat salvia cillum iphone  Seitan aliquip quis cardigan american apparel  butcher voluptate nisi qui  Raw denim you probably haven t heard of them jean shorts Austin  Nesciunt tofu stumptown aliqua  retro synth master cleanse  Mustache cliche tempor  williamsburg carles vegan helvetica  Reprehenderit butcher retro keffiyeh dreamcatcher synth  lt  p gt           lt  div gt           lt div id  sectionB  class  tab-pane fade  gt               lt h3 gt Section B lt  h3 gt               lt p gt Vestibulum nec erat eu nulla rhoncus fringilla ut non neque  Vivamus nibh urna  ornare id gravida ut  mollis a magna  Aliquam porttitor condimentum nisi  eu viverra ipsum porta ut  Nam hendrerit bibendum turpis  sed molestie mi fermentum id  Aenean volutpat velit sem  Sed consequat ante in rutrum convallis  Nunc facilisis leo at faucibus adipiscing  lt  p gt           lt  div gt           lt div id  sectionC  class  tab-pane fade  gt               lt h3 gt Section C lt  h3 gt               lt p gt Vestibulum nec erat eu nulla rhoncus fringilla ut non neque  Vivamus nibh urna  ornare id gravida ut  mollis a magna  Aliquam porttitor condimentum nisi  eu viverra ipsum porta ut  Nam hendrerit bibendum turpis  sed molestie mi fermentum id  Aenean volutpat velit sem  Sed consequat ante in rutrum convallis  Nunc facilisis leo at faucibus adipiscing  lt  p gt           lt  div gt       lt  div gt   lt  div gt      Dont forget to call the bootstrap and other fundamental things    here are quick codes for you    lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  gt    lt script src  https   ajax googleapis com ajax libs jquery 1 12 4 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     Now let s come to the explanation      The jQuery code in the above example simply gets the  element s   href attribute value when a new tab has been shown using the jQuery    attr   method and save it locally in the user s browser through HTML5   localStorage object  Later  when the user refresh the page it   retrieves this data and activate the related tab via  tab  show     method    Looking up for some examples  here is one for you guys   https   jsfiddle net Wineson123 brseabdr   I wish my answer could help you all   Cheerio

User · Answer

We used jquery trigger to onload have a script hit the button for us      class name   trigger  click

User · Answer

In addition to Xavi Mart  nez s answer avoiding the jump on click  Avoiding Jump    document  ready function            show active tab      if location hash                a href     location hash        tab  show                  set hash on click without jumb        document body  on  click    a data-toggle    function e             e preventDefault             if history pushState                 history pushState null  null  this getAttribute  href                       else                location hash   this getAttribute  href                          a href     location hash        tab  show             return false                  set hash on popstate    window  on  popstate   function          var anchor   location hash       a data-toggle tab    first   attr  href            a href     anchor        tab  show          Nested tabs  implementation with     character as separator    document  ready function            show active tab      if location hash             var tabs   location hash substring 1  split                  each tabs function n                   a href      tabs n         tab  show                                     a href     location hash        tab  show                  set hash on click without jumb        document body  on  click    a data-toggle    function e             e preventDefault             if history pushState                 history pushState null  null  this getAttribute  href                       else                location hash   this getAttribute  href                       var tabs   location hash substring 1  split                  console log tabs              each tabs function n                   a href      tabs n         tab  show                            a href     location hash        tab  show             return false                  set hash on popstate    window  on  popstate   function          var anchor   location hash       a data-toggle tab    first   attr  href         var tabs   anchor substring 1  split              each tabs function n               a href      tabs n         tab  show                    a href     anchor        tab  show

User · Answer

I tried the code offered by Xavi Mart  nez  It worked but not for IE7  The problem is - tabs don t refer to any relevant content  So  I prefer this code for solving that problem   function pageLoad         document  ready function          var tabCookieName    ui-tabs-1     cookie name     var location     cookie tabCookieName     take tab s href      if  location              Tabs a href      location         tab  show      activate tab                Tabs a   click function e          e preventDefault           this  tab  show                 when content is alredy shown - event activate          Tabs a   on  shown bs tab   function e          location   e target hash     take current href         cookie tabCookieName  location            path                  write href in cookie

User · Answer

My code  it work for me  I use localStorage HTML5      tabHistory  a   click function e      e preventDefault        this  tab  show           ul nav-tabs tabHistory  gt  li  gt  a   on  shown bs tab   function e      var id     e target  attr  href      localStorage setItem  selectedTab   id      var selectedTab   localStorage getItem  selectedTab        tabHistory a href      selectedTab         tab  show

User · Answer

Since I cannot comment yet I copied the answer from above  it really helped me out  But I changed it to work with cookies instead of  id so I wanted to share the alterations  This makes it possible to store the active tab longer than just one refresh  e g  multiple redirect  or when the id is already used and you don t want to implement koppors split method    lt ul class  nav nav-tabs  id  myTab  gt       lt li class  active  gt  lt a href   home  gt Home lt  a gt  lt  li gt       lt li gt  lt a href   profile  gt Profile lt  a gt  lt  li gt       lt li gt  lt a href   messages  gt Messages lt  a gt  lt  li gt       lt li gt  lt a href   settings  gt Settings lt  a gt  lt  li gt   lt  ul gt    lt div class  tab-content  gt       lt div class  tab-pane active  id  home  gt home lt  div gt       lt div class  tab-pane  id  profile  gt profile lt  div gt       lt div class  tab-pane  id  messages  gt messages lt  div gt       lt div class  tab-pane  id  settings  gt settings lt  div gt   lt  div gt    lt script gt      myTab a   click function  e        e preventDefault          this  tab  show            store the currently selected tab in the hash value    ul nav-tabs  gt  li  gt  a   on  shown bs tab   function  e        var id     e target  attr  href   substr 1         cookie  activeTab   id               on load of the page  switch to the currently selected tab     var hash     cookie  activeTab        if  hash    null                myTab a href       hash         tab  show           lt  script gt

User · Answer

Thanks for sharing   By reading all the solutions  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

This is the best one that I tried     document  ready function         if  location hash               a href      location hash         tab  show                document body  on  click    a data-toggle  tab     function event            location hash   this getAttribute  href                  window  on  popstate   function         var anchor   location hash       a data-toggle  tab     first   attr  href           a href      anchor         tab  show

User · Answer

Woe  there s so many ways to do this  I came up with this  short and simple  Hope this help others     var url   document location toString      if  url match                 nav-tabs a href       url split      1          tab  show                nav-tabs a   on  shown bs tab   function  e        window location hash   e target hash      if e target hash      activity              nano   nanoScroller

[jquery] Bootstrap 3: Keep selected tab on page refresh

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to tabs

Examples related to twitter-bootstrap-3