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

Javascript 刷新后保持在同一选项卡上,javascript,jquery,Javascript,Jquery,我正在开发一个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></

我正在开发一个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>
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

有什么建议吗?

  • 您可以在URL中添加一个查询参数,以便于 了解最后一个激活的选项卡
  • 另一个选项是使用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...";

谢谢你的快速回答,马丁。如果使用第一个方法,我可以将其设置为类似于
localStorage.setItem('lastDiv',menuId)?我从来没有用过那种方法,但它看起来像我想要的。在我设置好之后,我需要把它弄对吗?我可以使用方法
localStorage.getItem
?我看到了Martin。但我的问题不是检索URL。我的问题是,在刷新页面之前,网站必须转到用户的最后一个选项卡。如果您看到我的jQuery代码,您会注意到我已经通过执行
var menuId=location.hash.substring(1)
实现了这一点。它已经在存储访问的最后一个选项卡。抱歉,伙计,错过了该选项卡-因此您应该使用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...";