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

php html

2022-08-30 21:13:03

我正在为我的子页面产品使用TAB导航 - >（请参阅下面的代码，网站是用HTML和PHP实现的）?p=products

问题：

例如，用户单击第二个 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>

答案 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标准的轮子，不仅是W3C的期望（一些浏览器它远远领先于这些标准），而是编程常识对它的期望。恕我直言，当你克服属性的限制时，最重要的是尝试继续他们的自然行为，避免“神奇”功能和其他代码，这些代码将来会变得难以维护。OP需要的是存储某种价值，以便之后使用，仅此而已。

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

$(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开发例程之前进行了编程）不能过于依赖脚本技术，因此他们所做的传播某种行为将锚点存储到某个post/get变量中并使该值永久化，直到用户达到所需的例程，强制通过链接加载 #{$desiredAnchor} 以强制锚点行为。显然，这是一种有其缺陷和盲点的方法，但是当javascript在行业中不起很大作用时，这种方法非常普遍。例如，一些开发人员在百货商店的这种小垫子中工作时可能需要这个想法，其中pad的浏览器太旧而无法与javascript ES4 / ES5 / ES6新功能很好地配合使用。

答案 2

为每个选项卡提供 id。然后

$(".icon-cross").click(function(){
    var selected_id= $(this).attr('id);
    //save this id to cookie.Then retrieve this cookie value on next page visit
})