How to remember the active li item after refresh

Question

I'm using bootstrap as web UI. When I click one li item, it redirects to a new webpage and the active item will be the first item again, how can I sovle this problem?

    <ul id="profileTabs" class="nav nav-list">
        <li class="active"><a href="http://localhost/ojr/user/edit/Charles0429" data-toggle="list">Profile</a></li>
        <li><a href="http://localhost/ojr/user/edit/Charles0429" data-toggle="list">About Me</a></li>
        <li><a href="http://localhost/ojr/user/edit/Charles0429" data-toggle="list">My Match</a></li>
    </ul>

by adding class appropriate active class on redirected page. — Dipesh Parmar, Sep 10 '13 at 12:28
By using persistent storage as localStorage/cookie or sending params to requested page — A. Wolff, Sep 10 '13 at 12:29
[DOM Storage guide](https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage). — Ram, Sep 10 '13 at 12:29

score 4 · Accepted Answer · edited May 23 '17 at 12:31

4

You'll have to use localstorage or cookies to manage that.

$(function() { 
  //for bootstrap 3 use 'shown.bs.tab' instead of 'shown' in the next line
  $('a[data-toggle="tab"]').on('shown', function (e) {
    //save the latest tab; use cookies if you like 'em better:
    localStorage.setItem('lastTab', $(e.target).attr('id'));
  });

  //go to the latest tab, if it exists:
  var lastTab = localStorage.getItem('lastTab');
  if (lastTab) {
      $('#'+lastTab).tab('show');
  }
});

Code Courtesy How do I keep the current tab active with twitter bootstrap after a page reload?

In above code tabs are used but try replacing with li's you expect

edited May 23 '17 at 12:31

Community

1
1

answered Sep 10 '13 at 12:30

Vaibs_Cool

6,126
5
28
61

Thanks, what's the meaning of 'a[data-toggle="tab"]' ? – Charles0429 Sep 10 '13 at 12:33
I update my code, please help me! I'm new to boostrap and jquery. – Charles0429 Sep 10 '13 at 12:36
1

Just checked, when copy/paste other people answer, you should quote it: http://stackoverflow.com/a/10524697/1414562 ... – A. Wolff Sep 10 '13 at 12:36
This works when the page do need to refresh, but when I need to refresh the page, it just active the first item, my code is updated in my question, thanks in advance. – Charles0429 Sep 10 '13 at 12:50

Dave Haigh · Answer 2 · 2013-09-10T13:52:25.137

This could be achieved with just css. You need to apply classes to the html tags on the pages and individual classes to each li item.

e.g. HTML (for the profile page)

<html class="profilePage" >
...
    <ul id="profileTabs" class="nav nav-list">
        <li class="profileMenuItem"><a href="http://localhost/ojr/user/edit/Charles0429" data-toggle="list">Profile</a></li>
        <li class="aboutMenuItem"><a href="http://localhost/ojr/user/edit/Charles0429" data-toggle="list">About Me</a></li>
        <li class="matchMenuItem"><a href="http://localhost/ojr/user/edit/Charles0429" data-toggle="list">My Match</a></li>
    </ul>
...
</html>

CSS

.profilePage .profileMenuItem,
.aboutPage .aboutMenuItem,
.matchPage .matchMenuItem {
    /*active styles here*/
}

N.b. <html class="profilePage" > would change depending on which page you are on

E.g. For the My Match page

<html class="matchPage" >

For the About Me page

<html class="aboutPage" >

Once a time, there is an only one active item. When I click one Item, it redirects to one page(may be not the current one), So how could CSS achieve my goal? — Charles0429, Sep 10 '13 at 13:03
I don't understand you fully. But the technique I have provided can achieve your goal as far as I understand it. Essentially - applying styles to specific elements depending on what page you are on. — Dave Haigh, Sep 10 '13 at 13:50

How to remember the active li item after refresh

2 Answers2