使用“浏览器后退”按钮时维护页状态

Question

单击以访问我的wordpress站点

然后，单击页面顶部的棒球图形之一，您将看到我使用jQuery生成的棒球队列表：

​

<li class="">
  <a href="#baseball">
    <img src="http://www.luxuryvipsuites.com/wp-content/uploads/cache/2015/09/tab-image2/846523235/844979726.jpg" class=" crb_home_tab_icon" width="156" height="146"> </a>
</li>

​

• 点击任何列表中的一个链接(即费城人)。
• 从费城费城人网页浏览回主页
• 注意，我的棒球队列表消失了，列表被设置为默认的足球队列表。
• 当我浏览回家的时候，我需要显示棒球名单。最好用费城费城的链接突出显示。

我正在使用jquery.history.js，但不起作用。任何指导，非常感谢。

Answer 1

当您单击“后退”按钮时，它当前会为相应的菜单单击加载带有散列的URL。因此，我们可以用它来模拟点击。

以下是一种简单的方法，可以在单击“后退”按钮上加载内容。

jQuery(document).ready(function() {
    var hash = window.location.hash.substr(1);

    if(hash == 'baseball' || 
       hash == 'basketball' ||
       hash == 'hockey' ||
       hash == 'artists' ||
       hash == 'events'
    ) {
       $('#menu-' + hash).click();
    }

});

编辑:在你的代码中，当点击主页上的运动球链接时，删除#。

要将它们添加回JS，请尝试以下JS：

$('.tabs-nav a').on('click', function() {
     window.location.hash = $(this).attr('href');
});