The selected tab is not active after page refresh

Question

i am trying to have the last selected tab, after page refresh. My code is below.By this code always first tab is in active after page reload.

javascript

<script>
      $(function() {
      $( "#tabs" ).tabs();
      });

    </script>

html:

<body>
    <div id='childarpt' class='childarpt' ></br>
    <div id="tabs"><ul>
    <li class="active"><a href="#Total"><span>Total</span></a></li>
    <li><a href="#USA"><span>USA</span></a></li>
    <li><a href="#ASIA"><span>ASIA</span></a></li>
    <li><a href="#JAPAN"><span>JAPAN</span></a></li>
    <li><a href="#LATAM"><span>LATAM</span></a></li>
    <li><a href="#EMEA"><span>EMEA</span></a></li>
    </ul>
    <table id='myTable' border='0'>

     <div id="Total" class="tab active">
     Total
     </div>
     <div id="USA" class="tab">
     USA
    </div>
    <div id="ASIA" class="tab">
    ASIA
    </div>
    <div id="JAPAN" class="tab">
    JAPAN
     </div>
      <div id="LATAM" class="tab">
      LATAM
     </div>
     <div id="EMEA" class="tab">
     EMEA
    </div>

     </table>
     </div>
     </body>

You may store the Tab ID in a cookie or something , so you can retrieve it later . Check Here : http://stackoverflow.com/questions/4299435/remember-which-tab-was-active-after-refresh — Ashraf, Apr 17 '16 at 08:58

score 1 · Answer 1 · answered Apr 17 '16 at 09:20

A quick and dirty solution to your issue

$(function() {
  var tabs = $( "#tabs" )
  tabs.tabs({
    activate: function(e,ui) {
      var index = ui.newTab.index()
      location.hash = index;
    },
    active: location.hash.replace(/#/,"") || 0
  });
});

You will need to change the storing and loading of the state, but this will set you off.

score 0 · Answer 2 · answered Apr 17 '16 at 09:06

0

Instead of

$(function() { $( "#tabs" ).tabs(); });

Try this:

$( "#tabs" ).tabs({ active: 5 });

This will make the sixth (it is zero-indexed) tab the default active tab.

for your reference : http://api.jqueryui.com/tabs/

answered Apr 17 '16 at 09:06

anjaneyulubatta505

10,713
1
52
62

Op doesn't know what is the active tab. And he also wants to keep it persistent against reload – Lelio Faieta Apr 17 '16 at 09:29
@LelioFaieta I gave static number for the tab. if we want last selected tab we need to set tab number on each reload dynamically. – anjaneyulubatta505 Apr 17 '16 at 09:40
not true! Each as its unique id. And you don't solve the issue of keeping the info on reload – Lelio Faieta Apr 17 '16 at 09:42

score 0 · Answer 3 · edited May 23 '17 at 11:50

0

Refer to Bootstrap 3: Keep selected tab on page refresh, it contains all the information you need to implement what you want.

The idea is to store the selected tab in the hashvalue of the window. Change the hash of the location when another tab is selected.

edited May 23 '17 at 11:50

Community

1
1

answered Apr 17 '16 at 09:10

Shubham Khatri

270,417
55
406
400

The selected tab is not active after page refresh

3 Answers3