Can I keep on same jQuery tab on page refresh or when I have navigated away from the page?

Question

I have a basic jQuery tabs system going:

$(document).ready(function(){
  $('#tabs div.jdiv').hide();
  $('#tabs div.jdiv:first').fadeIn("slow");
  $('#tabs ul.jdiv li:first').addClass('active');
  $('#tabs ul.jdiv li a').click(function(){ 
    $('#tabs ul.jdiv li').removeClass('active');
    $(this).parent().addClass('active'); 
    var currentTab = $(this).attr('href'); 
    $('#tabs div.jdiv').hide();
    $(currentTab).fadeIn("slow");
  return false;
  });
});

<div id="tabs" style="position:relative; ">
                <ul class="jdiv">
                  <li><a href="#current-points">Current Points</a></li>
                  <li><a href="#my-details">My Details</a></li>
                  <li><a href="#prizes">Prizes</a></li>
                  <li><a href="#basket">Your sack</a></li>
                  <li><a href="#order-history">Order History</a></li>

                </ul>

            <div id="current-points" class="jdiv" style="position:relative;">
                <?php include('current-points.php');?>     
            </div> 

etc....

My issue is, I am planning on having another set of jQuery tabs within one of these pages, which isnt a problem, but when they click on a link or refresh the page, is it possible to stay on the same tab? On the parent or child set of tabs?

Thanks!

Adequacy

Im not using a tab specific plugin, just regular jQuery – Adequacy

Answer 1

You can use hash tags to uniquely identify each tab, so http://example.com/yourpage.html#current-points takes you to the current-points tab, and http://example.com/yourpage.html#my-details takes you to the my-details tab. You can set the hash by assigning to location.hash, and of course you can read that on page load. This also has the huge advantage that your users can bookmark the tabs they want. You can use a path in the hash if you have tabs within tabs (so #first/foo takes you to the first tab and its foo subtab; #first/bar takes you to the first tab and its bar subtab).

Here's a really basic example (without subtabs, but you get the idea):

Live copy | Live source

HTML:

<ul id="nav">
    <li><a href="#first">First</a></li>
    <li><a href="#second">Second</a></li>
    <li><a href="#third">Third</a></li>
</ul>
<div class="tab" id="tab-first">This is first</div>
<div class="tab" id="tab-second">This is second</div>
<div class="tab" id="tab-third">This is third</div>

JavaScript:

jQuery(function($) {

    $("<p>").html("Loaded at " + new Date()).appendTo(
        document.body
    );
    showTab(location.hash || "first");

    $("#nav a").click(function() {
        var hash = this.getAttribute("href");
        if (hash.substring(0, 1) === "#") {
            hash = hash.substring(1);
        }
        location.hash = hash;
        showTab(hash);
        return false;
    });

    function showTab(hash) {
        $("div.tab").hide();
        $("#tab-" + hash).show();
    }

});

Alternately (or in conjunction), you can set a cookie when they change tabs, and check for the cookie on page load to select the last tab they had selected.

Terrill

Ok this is brill, thanks. A much better tab system than I had originally. – Adequacy

Just wondering... I am trying to set a cookie when the user switches tabs... will this need to be done through javascript or just in PHP? – Adequacy

@JamesG: I didn't see any calls to the server in your tabs stuff, so you'd do it with JavaScript. Browsers expose cookies to JavaScript is a very strange way, but there are cookie plug-ins to jQuery (like this one) that will handle any complexity for you, or you can grab some code from quirksmode (it also has a reasonable write-up of how the JavaScript interface to them works). – Terrill

Ok thanks! Didnt even know about cookies with JS... such a noob sorry. Appreciate it! – Adequacy

awesome, many thanks. We had this issue with refresh since ages and finally it is fixed. :) – Guillermo

Answer 2

To preserve the current tab open after the page is refreshed only solution coming in my mind is using cookies, I think it's the only one.

If you use a link in the web page, on the other hand, to refresh the page you could add an anchor to it with the tab opened at the time.

Underworld

Answer 3

Not easily. The client side script is reloaded when you refresh the page, and all changes will be undone, unless of course you store it somewhere — possibly as a URL parameter?

Radiotelegraphy

Ok, souinds reasonable. I just assumed it would be a common problem that there is a definite solution for. Ill try the URL parameter. Thanks – Adequacy