我可以在页面刷新时或当我离开页面时保持相同的jQuery选项卡吗？

Question

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

$(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选项卡,这不是问题,但是当他们点击链接或刷新页面时,是否可以保留在同一个选项卡上？在父级或子级选项卡上？

谢谢!

Answer 1

您可以使用哈希标记来唯一标识每个选项卡,这样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子选项卡).

这是一个非常基本的例子(没有子标签,但你明白了):

实时复制 | 直播源

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

});

或者(或结合),您可以在更改选项卡时设置cookie,并在页面加载时检查cookie以选择他们选择的最后一个选项卡.