php - 选项卡导航 - 记住用户选择

Question

我正在为我的子页面 Products 使用 TAB 导航 -> ?p=products(见下面的代码，网站是用 HTML 和 PHP 实现的)

问题:

例如，用户在第二个 TAB 中单击链接详细信息。然后他使用后退按钮。现在他返回产品站点，但不是在第二个选项卡中，而是在第一个选项卡中。

如果用户返回产品页面，我想记住上次使用的选项卡(此处:href="#section-2")。

我怎样才能意识到这一点？

<div id="tabs" class="tabs">
    <nav>
        <ul>
            <li><a href="#section-1" class="icon-cross"><span>Product 1</span></a></li>
            <li><a href="#section-2" class="icon-cross"><span>Product 2</span></a></li>
            <li><a href="#section-3" class="icon-cross"><span>Product 3</span></a></li>
            <li><a href="#section-4" class="icon-cross"><span>Product 4</span></a></li>
        </ul>
    </nav>

    <div class="content">

        <section id="section-1">
            <div class="tab-heading">
                <hr>
                <h2 class="intro-text text-center"><strong>Product 1</strong></h2>
                <hr>
            </div>
            ...
        </section>

        <section id="section-2">
            <div class="tab-heading">
                <hr>
                <h2 class="intro-text text-center"><strong>Product 2</strong></h2>
                <hr>
            </div>

            <a href="?p=details">Details</a>

        </section>
    </div>
</div>

Answer 1

您可以使用 sessionStorage存储(当用户的浏览器打开时)最后使用的选项卡并在每次页面加载时检索:

$(document).load(function(){
   if (sessionStorage.getItem('lastsessionid') != null){
       //go to anchor, simulates the link click
       $(document).scrollTop( $(sessionStorage.getItem('lastsessionid')).offset().top );
   }
   $('a[href=#section*]').on('click', function(){
       sessionStorage.setItem('lastsessionid', this.href);
   });
});

编辑:哇，它变成了如此高票数的答案，我会改进它。我的解决方案的主要思想是不要重新发明W3C standards 的轮子。关于 anchor ，不仅是 W3C 所期望的(某些浏览器远远领先于这些标准)，而且是编程常识所期望的。恕我直言，当您克服属性的限制时，最重要的是尝试继续其自然行为，避免“神奇”功能和其他将来难以维护的代码。 OP 需要的是存储某种值以供之后使用。

其他常见的方法是使用 trigger技术，但我强烈建议避免使用触发器，因为您正在模拟用户的不必要交互，并且有时，应用程序具有与元素的单击事件相关联的其他例程，这些例程可能会使单击的使用变得麻烦。确实，我执行 anchor 行为的方式也是模拟的，但是，最终，我的编码文化是避免触发以保持事件调用的性质:

$(document).load(function(){
   if (sessionStorage.getItem('lastsessionid') != null){
       //go to anchor, simulates the link click
       $(sessionStorage.getItem('lastsessionid')).trigger('click');
   }
   $('a[href=#section*]').on('click', function(){
       sessionStorage.setItem('lastsessionid', this.href);
   });
});

对于某种信息，在过去，Web 开发人员(我还不算老，但我在 javascript 将如此出色的工具转变为 Web 开发例程之前进行了编程)不能如此依赖脚本技术，因此他们为传播某种行为所做的就是将该 anchor 存储到某个 post/get 变量中并保持该值，直到用户到达所需的例程，强制通过链接加载 #{$desiredAnchor} 以强制 anchor 行为。显然，这是一种有缺陷和盲点的方法，但是当 javascript 不是这个行业的重要角色时，它非常普遍。一些开发人员在百货公司的如此小的平板电脑上工作时可能需要这个想法，例如，平板电脑的浏览器太旧而无法与 javascript ES4/ES5/ES6 新功能一起使用。