Remembering jQuery tab position after page reloads

Question

I have a page that contains some GridViews. I have kept them in tabs using tab-menu. There are four tabs.

My problem is when the page reloads, the tab gets reset to the first tab.

HTML:

<div id="tabbed_box_1" class="tabbed_box">
    &nbsp; &nbsp;
    <div class="tabbed_area">
        <ul class="tabs">
            <li><a href="#" title="content_1" class="tab active">Bottom Banner</a></li>
            <li><a href="#" title="content_2" class="tab">Side Banner Bottom</a></li>
            <li><a href="#" title="content_3" class="tab">Side Banner Top</a></li>
            <li><a href="#" title="content_4" class="tab">Main Ad</a></li>
        </ul>
        <div id="content_1" class="content">
            <table width="500" border="0" align="center" cellpadding="0" cellspacing="2" class="border">
                <tr>
                    <td align="center">
                      //some gridview here
                    </td>
                </tr>
            </table>
        </div>
        //similarly three more gridviews

jQuery:

 $(document).ready(function () {

     // When a link is clicked
     $("a.tab").click(function () {

        // switch all tabs off
        $(".active").removeClass("active");

        // switch this tab on
        $(this).addClass("active");

        // slide all content up
        $(".content").slideUp();

        // slide this content up
        var content_show = $(this).attr("title");
        $("#" + content_show).slideDown();

    });
});

How can I make the currently-clicked tab show even after page reloads?

Denys Séguret · Accepted Answer · 2013-04-17T09:14:57.633

3

The simple solution is to use localStorage to persist the selection :

 $(document).ready(function () {

        function activate(tab) {
           // switch all tabs off
            $(".active").removeClass("active");

            // switch this tab on
            tab.addClass("active");

            // slide all content up
            $(".content").slideUp();

            // slide this content up
            var content_show = tab.attr("title");
            $("#" + content_show).slideDown();
        }

        if (localStorage) { // let's not crash if some user has IE7
             var index = parseInt(localStorage['tab']||'0');
             activate($('a.tab').eq(index));
        }

        // When a link is clicked
        $("a.tab").click(function () {
            if (localStorage) localStorage['tab'] = $(this).closest('li').index();
            activate($(this));
        });

    });

edited Apr 17 '13 at 09:14

answered Apr 17 '13 at 07:44

Denys Séguret

372,613
87
782
758

1

Local storage is only available to browsers with it. Check a list here http://diveintohtml5.info/storage.html – Ivo Pereira Apr 17 '13 at 07:49
1

Unfortunately some projects even before IE8 need support (unfortunately, self experience!) – Ivo Pereira Apr 17 '13 at 07:53
if i use your code, the tab-menu is visible for one second and then it slides up. After i refresh the page, none of the tab-menus come down again – nitinvertigo Apr 17 '13 at 09:00
Could you build a fiddle (for example on http://jsfiddle.net) demonstrating your tabs ? – Denys Séguret Apr 17 '13 at 09:12
I also just edited to fix a bug (a this I had forgotten in the activate function) – Denys Séguret Apr 17 '13 at 09:15

score 1 · Answer 2 · edited May 23 '17 at 12:18

You can try using an hashtag in your URL whenever a tab is clicked, and then in your code, you check if there exists an hashtag, which id of which tab corresponds it to.

<ul id="tabs">
    <li><a id="category1" href="#category1">Category 1</a></li>
    <li><a id="category2" href="#category2">Category 2</a></li>
    <li><a id="category3" href="#category3">Category 3</a></li>
</ul>

if(window.location.hash) {
    $(window.location.hash).click();
}

based on: Jquery, activate script if hashtag on end of URL matches a class name

Remembering jQuery tab position after page reloads

2 Answers2

Linked