我可以在页面刷新时还是在离开页面时保持在同一jQuery选项卡上? [英] Can I keep on same jQuery tab on page refresh or when I have navigated away from the page?

问题描述

我有一个基本的jQuery标签系统:

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> 

等...

我的问题是，我计划在其中一个页面中包含另一组jQuery选项卡，这不是问题，但是当他们单击链接或刷新页面时，是否可以保留在同一选项卡上?在父项或子项选项卡上?

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?

谢谢！

推荐答案

您可以使用哈希标签来唯一标识每个选项卡，因此http://example.com/yourpage.html#current-points会将您带到current-points选项卡，而http://example.com/yourpage.html#my-details会将您带到my-details标签.您可以通过分配给location.hash来设置哈希值，当然可以在页面加载时读取它.这也具有巨大的优势，即您的用户可以为所需的选项卡添加书签.如果选项卡中包含选项卡，则可以在哈希中使用路径(因此#first/foo会将您带至first选项卡及其foo子选项卡； #first/bar会将您带至first选项卡及其bar子标签).

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):

实时复制 | 实时来源

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:

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();
    }

});

或者(或结合使用)，您可以在他们更改标签时设置Cookie，并在页面加载时检查Cookie，以选择他们选择的最后一个标签.

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.

这篇关于我可以在页面刷新时还是在离开页面时保持在同一jQuery选项卡上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！