我正在开发一个 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)。
有什么建议吗?
最佳答案
- 您可以在 URL 中添加查询参数,以便于您 了解哪个是最后一个事件选项卡。
- 另一个选项是使用 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...";
关于javascript - 刷新后留在同一选项卡上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44286956/