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

问题

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!

回答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.

回答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.

回答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?

来源：https://stackoverflow.com/questions/9497320/can-i-keep-on-same-jquery-tab-on-page-refresh-or-when-i-have-navigated-away-from

标签

jquery

jquery-tabs