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会将您带到{ {1}}标签及其first子标签。）

这是一个非常基本的例子（没有subtabs，但你明白了）：

Live copy | Live source

HTML：

bar

JavaScript的：

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

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

Answer 2

要在页面刷新后保持当前标签打开，我脑海中只有使用Cookie的解决方案，我认为这是唯一的。

另一方面，如果您在网页中使用链接，要刷新页面，您可以使用当时打开的标签为其添加锚点。

Answer 3

不容易。刷新页面时会重新加载客户端脚本，并且所有更改都将被撤消，除非您将其存储在某处 - 可能作为URL参数？

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

3 个答案: