Question

我正在开发一个jQuery网站，它有一个顶级菜单来浏览div。我希望它保持在刷新页面之前的相同选项卡上。

菜单代码

<ul class="menu" id="menu">
    <li class="menu-text"><h4>Title</h4></li> 
    <li class="current"><a href="#1" data-id="div1">Menu1</a></li>
    <li><a href="#2" data-id="div2">Menu2</a></li>
    <li><a href="#3" data-id="div3">Menu3</a></li>
 </ul>

内容分区

<div class="pbox" id="div1"> ... </div>
<div class="pbox" id="div2"> ... </div>
<div class="pbox" id="div3"> ... </div>

jQuery

var menu = $('#menu');
menu.on('click', 'a', function () {
  var current = $(this).closest('li');
  if(!current.hasClass("current")){        
    $('.current').removeClass('current');
    current.addClass("current");

    var id = $(this).attr('data-id');       
    $('.pbox:visible').hide(600);
    $('#' + id + '.pbox').show(600);
    history.pushState(null, null, '#' + id);
  }
});

var menuId = location.hash.substring(1);
if (menuId) {
  $(menu, "li a[data-id='" + menuId + "']").trigger('click');
}

唯一的问题是，当我刷新页面时， URL 仍然相同（如果我在第二个选项卡上并刷新页面，链接将是：index.php＃2）但是'重定向'到第一个标签（＃1 ）。

任何sugestions？

Answer 1

您可以在网址中添加查询参数，以便您轻松使用了解哪个是最后一个活动标签。
另一个选项是使用localStorage保存哪个是最后点击的标签，并在页面/小部件加载时从存储接收

第一个更简单，涵盖在这里： https://www.w3schools.com/jsref/prop_loc_hash.asp

function myFunction() {
    location.hash = "part5";
    var x = "The anchor part is now: " + location.hash;
    document.getElementById("demo").innerHTML = x;
}

你可以在这里找到第二个： https://developer.mozilla.org/en/docs/Web/API/Window/localStorage 本地存储方式：

if (typeof(Storage) !== "undefined") {
    // Store
    localStorage.setItem("lastname", "Smith");
    // Retrieve
    document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";

刷新后保持在同一个选项卡上

1 个答案: