vega.rd.no

Remembering the selected tab

Monday May 25, 2009

Getting jQuery to remember the currently selected tab when you refresh the page is not trivial, but it is doable. You will need the cookie plugin and of course, jQuery UI.

The code is simple enough:

$(document).ready(function()
{
    $("#tabs").tabs(
    {
        select: function(event, ui)
        {
            $.cookie('selected-tab', '#' + ui.panel.id);
        }
    }).tabs('select', $.cookie('selected-tab'));
});

Whenever a tab is selected, you simply set a cookie that indicates which tab you are on. When the document loads, you simply select the tab specified in the cookie.

You will need to change the cookie’s name based on which tabs you are applying this method on, otherwise it will fail whenever you have tabs on more than one page.