Store data and information for tabs

Question

I have the following lines of code in my website - http://codepen.io/anon/pen/rOJNoe

<div class="nav-wrapper">
  <ul class="nav nav-pills nav-justified">
    <li class="active"><a href="#EXOBusinessModules" data-toggle="pill">Tab 1</a></li>
    <li><a href="#EXOEmployerServiceModules" data-toggle="pill">Tab 2</a></li>
  </ul>
</div>

<div class="tab-content">
  <div class="tab-pane fade in active" id="EXOBusinessModules">

    <div class="proof-points-3">
      <span id="EXOBusinessModules" class="anchor anchor-sticky"></span>

      <div class="proof-point">
        <span id="EXOOn-The-Go" class="anchor anchor-sticky"></span>
        <a href="#">
          <h4>Lorem ipsum dolor sit amet</h4>
        </a>
      </div>

      <div class="proof-point">
        <span id="EXOAdd-ons" class="anchor anchor-sticky"></span>
        <a href="#">
          <h4>Consectetur adipiscing elit</h4>
        </a>
      </div>
    </div>
  </div>

  <div class="tab-pane fade" id="EXOEmployerServiceModules">

    <div class="proof-points-3">
      <span id="EXOEmployerServiceModules" class="anchor anchor-sticky"></span>

      <div class="proof-point">
        <span id="EXOPayroll" class="anchor anchor-sticky"></span>
        <a href="#">
          <h4>Curabitur dapibus mi tellus</h4>
        </a>
      </div>

      <div class="proof-point">
        <span id="EXOEmployeeInformation" class="anchor anchor-sticky"></span>
        <a href="#">      
          <h4>cursus et interdum sit amet</h4>
        </a>
      </div>
    </div>
  </div>
</div>

How can I make it so that when the user selects a tab, for example 'Tab 2' and then refreshes their browser (or goes to another page and returns back here), it stores which tab they previously were on?

you can see this [demo](http://www.tutorialrepublic.com/faq/how-to-keep-the-current-tab-active-on-page-reload-in-bootstrap.php) and it will be helpful — Mike Ross, Oct 22 '15 at 03:01

score 1 · Answer 1 · answered Oct 22 '15 at 02:54

The easiest way to do this would be to use HTML5 Local Storage. You can do this with JS:

// Check if tab is set. If it is, keep it. If not, set default tab to tab1
if(localStorage.tab == undefined)
    localStorage.tab = 1;

// Use whatever code you have to go to that tab (I don't know what you have...)
goToTab(localStorage.tab);

If you wanted to, you could also use JS or PHP cookies, but I think this method is less cumbersome and is easier.

score 1 · Accepted Answer · answered Oct 22 '15 at 10:28

1

you can see this demo and it will be helpful - Mike Ross

answered Oct 22 '15 at 10:28

user1752759

605
1
10
29

score 0 · Answer 3 · edited May 23 '17 at 10:27

0

You want to utilize cookies to save a small amount of data like this.

If you're looking to save more than just a bit of information, you'll need to look into html5 local storage.

edited May 23 '17 at 10:27

Community

1
1

answered Oct 22 '15 at 03:00

Brad Evans

659
6
18

Store data and information for tabs

3 Answers3