Keep current Bootstrap tab active after page reload without jumping to first one between

Question

I'm using Bootstrap pills in my app:

<div class="container">
  <ul class="nav nav-pills">
    <li class="active"><a data-target="#home" data-toggle="tab">Home</a></li>
    <li><a href="#about" data-toggle="tab">About</a></li>
    <li><a href="#contacts" data-toggle="tab">Contacts</a></li>
  </ul>
</div>

<div class="tab-content">
  <div class="tab-pane active" id="home">Home</div>
  <div class="tab-pane" id="about">About</div>
  <div class="tab-pane" id="contacts">Contacts</div>
</div>

In order to stay on the same tab after page reload I use the following function:

$(function() {
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    localStorage.setItem('lastTab', $(this).attr('href'));
  });
  var lastTab = localStorage.getItem('lastTab');
  if (lastTab) {
    $('[href="' + lastTab + '"]').tab('show');
  }
});

The problem is that after page reload, the first tab becomes active for 1 second and then it jumps to the actual active tab. Can I keep current tab without this 'jumping'?

Either hide tabs until you decide which one to show, or write inline script for `active` class. One more approach would be to set the `active` class before loading any other script, that way you won't wait for a second, it will be done quickly. — skobaljic, Sep 05 '16 at 13:39
I think in current state - You can't - You render your pills in different state and then switch it via javascript - You should store active pill state in server-side or hide everything below some kind of loader (UX) before it switch to proper pill/tab — lukaszkups, Sep 05 '16 at 13:39

gaetanoM · Answer 1 · 2016-09-05T14:07:33.990

This line:

$('[href="' + lastTab + '"]').tab('show');

must be changed in:

$('[data-target="' + lastTab + '"]').tab('show');

You cannot refer to href but to data-target.

The same apply for: localStorage.setItem.....

The fixed code (jsfiddle):

$(function() {
  var lastTab = localStorage.getItem('lastTab');
  $('.container, .tab-content').removeClass('hidden');
  if (lastTab) {
    $('[data-target="' + lastTab + '"]').tab('show');
  }
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    localStorage.setItem('lastTab', $(this).data('target'));
  });
});

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container hidden">
    <ul class="nav nav-pills">
        <li><a data-target="#home" data-toggle="tab">Home</a></li>
        <li><a data-target="#about" data-toggle="tab">About</a></li>
        <li><a data-target="#contacts" data-toggle="tab">Contacts</a></li>
    </ul>
</div>

<div class="tab-content hidden">
    <div class="tab-pane" id="home">Home</div>
    <div class="tab-pane" id="about">About</div>
    <div class="tab-pane" id="contacts">Contacts</div>
</div>

My mistake, I just noticed that my code had ```href``` instead of ```data-target``` in all `````` tags (see edit to my question, very sorry). So I changed them and used your fixed code but the problem is still the same: the first tab becomes active for 1 second and only then the needed tab — Nadiya, Sep 05 '16 at 14:00
@Zelenka You may add hidden class and so reorganize your js like in my snippet. Let me know. — gaetanoM, Sep 05 '16 at 14:09
I added an answer to this question below. Thanks for your time! — Nadiya, Sep 05 '16 at 14:13

score 1 · Accepted Answer · answered Sep 05 '16 at 14:05

1

The answer is as simple as ABC.

I just needed to remove class="active" from the first <li></li> tag:

<li><a data-target="#home" data-toggle="tab">Home</a></li>

answered Sep 05 '16 at 14:05

Nadiya

1,421
4
19
34

1

With this when a user comes for first time no tab will be open. – Shahbaz A. Aug 31 '17 at 09:10

score 0 · Answer 3 · edited May 24 '23 at 20:01

Simple answer: just remove the ACTIVE CLASS from the default tab and its contents.

<div class="container">
  <ul class="nav nav-pills">
    <li><a data-target="#home" data-toggle="tab">Home</a></li>
    <li><a href="#about" data-toggle="tab">About</a></li>
    <li><a href="#contacts" data-toggle="tab">Contacts</a></li>
  </ul>
</div>

<div class="tab-content">
  <div class="tab-pane" id="home">Home</div>
  <div class="tab-pane" id="about">About</div>
  <div class="tab-pane" id="contacts">Contacts</div>
</div>

In the Javascript file in the script tag:

$(function() {
    var lastTab = localStorage.getItem('lastTab');
    if (lastTab) {
      $('[data-target="' + lastTab + '"]').tab('show');
    }
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      localStorage.setItem('lastTab', $(this).data('target'));
    });
});

Keep current Bootstrap tab active after page reload without jumping to first one between

3 Answers3