How to keep the tab active when the user come page to page?

Hi all

I have a standard tabbing section to divide content into separate tabs, similar to the jQuery tabs.
My problem, how can I keep the active tab open when a user comes back to the page without them needing to re-select the tab.

Is this a cookie issue?
How can I modify the code below?

$(document).ready(function() {

    //Default Action
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;


For Reference:

<ul class="tabs">
<li><a href="#welcome">welcome</a></li>
<li><a href="#one">tab 01</a></li>
<li><a href="#two">tab 02</a></li>

<section class="tab_container">
<article id="welcome" class="tab_content"><p>content</p></article>
<article id="one" class="tab_content"><p>content</p></article>
<article id="two" class="tab_content"><p>content</p></article>

Many thanks.

Right now, the tabs are already linked to their respective content with a fragment identifier (href=“#welcome”). When a tab is clicked, you’re currently cancelling the default action by returning false from the event listener.

If you instead allow the default action, so that the address bar updates with the fragment, then when the user leaves the page and comes back, the fragment will be preserved in the URL. Then, rather than load the first page, you can check to see if there’s a fragment identifier, and load the appropriate content if there is.

I reworked your code because I can’t help myself from messing with things, but the only two real changes I made are:

  1. Allow the default action when the tab is clicked.
  2. When the page is loaded, check for a fragment identifier to see which page should be loaded.

(Also: In your original code, the “active” class was added to <li> elements. In my rewrite, it gets added to the <a> instead. Just a heads up.)

Here’s the updated jQuery code:

$(document).ready(function() {
    var $tabs = $('.tabs'),
        $tabsA = $tabs.find('a'),
        $tabsC = $('.tab_content'),
        start = window.location.hash || '#welcome';

    function deactivate() {
    function activate(href) {
        $tabsA.filter('[href=' + href + ']').addClass('active');

    function clicked(e) {
        var href = $('href');

    $tabs.on('click', 'a', clicked);

I don’t like messing with cookies if I don’t have to, but this technique isn’t perfect: Because the user is actually following the link, the browser will try to scroll down so that the content displays at the top of the window.

I suggest that you first look at how to achieve this without scripting, for that is the most reliable technique in which this type of presentation is achieved.
For example: and video tutorial

I’m with Paul, there are better (and easier?) ways without js (for peeps without Javascript enabled).

Otherwise, what aufshebung did would work. However, that won’t work if the user clicks the backbutton because document.ready() doesn’t get (re)executed on back/forward. For that, you’ll need to look into a solution like Ben Almans BBQ combined with aufshebung solution.

By the way, how do you guys highlight javascript code?
I’ve tried [javascript ], [JavaScript ] , and [js ]

There’s a Go Advanced button at the bottom of the message when you’re replying, and in the toolbar of that screen there is a Syntax dropdown.

 is the tag that's used.

For example:


(function (window, document, undefined) {
    // ...
}(this, this.document));

I just use the handwritten version of the highlight tag most of the time, instead of heading off to advanced.

Thanks Aufshebung

I understand what your saying though have a couple of issues with what you suggest.

  1. I don’t want the address bar to reflect what tab is active, I’d like to keep the URL clean just referencing the one page with the detection/cookie code in the background, if possible. I also have a FB like button on a number of sites which treats these as different pages if I remove the default action.
  2. The reason I’ve added active to <li> is because I need more control over the styling and need to style both the <li> & <a> to get the desired effect.

Thanks Paul

I’m already using this CSS technique on some main navigation’s and works well, not to concerned about the styling at present.
I really need to keep the tab open once somebody clicks back in the browser or links back to that same page, maybe a 24hr cookie?

Hope this makes sense.
Appreciate your suggestions and feedback.


Does the tab on the current page change based on the previous page? If yes, then a cookie is useful to recording that state-based information.
If instead though the tab on current page (such as the about page) is always the same tab, then it should be that page that determines the active tab.

It doesn’t have to be done based on the URL. With the navigation and the CSS being already in place, you can just manually set the body identifier on the about page:

<body id="about">

and your job is done.

Don’t make the task more complex than it needs to be to get the job done well.

Does the tab on the current page change based on the previous page?
Not at present, but this will be my next step, to link directly to a tab from another page.

I still think your getting the wrong idea of what is needed Paul.

Ok, example.
I have 3 pages: home, about, company.
Home and about have no tabs but the company page has 3 tabs as above.

Say for example, I’m currently on the company page and viewing the second tab, I then follow a link from this tab to the home page.
But when I click back in the browser, the tabs have reset to the welcome tab, I would like the second tab I was just viewing to still be in active.

making sense?
Cheers, Barry

Yes that makes sense, so you will want then to record the the state of that menu structure in to a cookie for that page, so that it can be recreated later on.
That could be as simple as recording which menus are currently open, so that when you return back to the page you can start when them all closed, and then open the ones that are retrieved from the cookie.

Yes Paul

so that it can be recreated later on
Recreated and remembered, just so the user doesn’t have to keep clicking back to the tab they where currently looking at.

How can we set this up with the code we already have a above?

Thanks, Barry

The way that this sort of thing is done, is whenever the user changes a part of the menu structure, you loop through the menu for the open items and update the cookie with that information.

When the page loads, you start with closed menu items, then get the cookie and use that info to open up the required menu items.

Thanks, though no idea how to code this?
I need what we have above to work like

Any suggestions?

Which parts do you need more information on, in order to code it yourself?

How to add the cookie information to the code in my first post, without using all the jQuery cookie plugins etc.


Here are the cookie handling functions that seem to work the best, to create, read, and erase cookies.
Background info on these can be found at the quirksmode page on cookies

Cheers Paul, I’ll see if I can get this working and get back with any issues.

thanks again.

This just turned up today.

CSS only tabbed pages with persist and other features
“The most recently clicked tab will be remembered and stay open even if you click elsewhere on the page or if the page is reloaded.”

Still having the issue with the address bar, though very impressive.

I’ve also been looking a the Cookie handlers, just don’t know how to integrate this into my code?
Could you offer any examples Paul?

Thanks, Barry

Sure thing. If you want to record that the welcome tab is open you could set a cookie for that with:

createCookie('homepageTabs', 'welcome');

When the page first loads you might want to see if there is any cookie information about the homepage tabs, so that you can then do stuff based on that info.

var activeTab = readCookie('homepageTabs');
if (activeTab) {
    // show the tab, which from earlier would be the welcome tab

Since you’re using jQuery though, were you aware that jQueryUI tabs uses the same technique already, to automatically remember which tab is currently open?

The “View source” link on that page shows you how that’s achieved using the tabs plugin that goes with jQueryUI.

Great, thanks.
I was trying to avoid loading more JS files, I might use the jQuery UI.

Again, I’ll have a play around and see what I come up with :slight_smile: