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

【问题标题】：Tab-Navigation - Remember user selection选项卡导航 - 记住用户选择
【发布时间】：2017-10-28 18:51:37
【问题描述】：

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

问题：

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

如果用户返回产品页面，我想记住上次使用的标签（此处：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>

【问题讨论】：

如果您想快速排序，请发布一个工作小提琴
这取决于你想如何解决它（你是否实现了选项卡或者你是否使用了某种插件？）从那里继续工作会很好。无论哪种方式，取决于它：我看到两种可能的方式。一种是：将活动选项卡附加到 url。这种方法的优点是您稍后可以渲染服务器上哪个选项卡处于活动状态。另一种方法是将其保存在 cookie 或本地存储中，并始终更新最后一个活动选项卡。然后通过 javascript 如果页面被加载并且站点包含活动选项卡 id 瞧 -> 打开选项卡
您可以使用Cookies 或sessionStorage
您是在使用标签库还是全部编写代码？

标签： php html

【解决方案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 技术，但我强烈建议避免使用触发器，因为您在模拟用户的交互是不必要的，而且有时，应用程序还有其他与元素的点击事件相关联的例程可以转向使用点击麻烦。确实，我执行锚点行为的方式也是模拟的，但是，最终，我的编码文化是避免触发以保持事件调用的性质：

$(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 不是这个行业的重要角色时，它非常普遍。一些开发人员在百货公司的如此小的平板电脑上工作时可能需要这个想法，例如，平板电脑的浏览器太旧而无法与 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
})

【讨论】：

【解决方案3】：

问题是标签的普通库不保留标签链接的哈希值。因此，您的浏览器无法跟踪选项卡的进度，因此后退按钮在您预期的选项卡的情况下不起作用。

所以我们的想法是在href 选项卡中保留# 链接。如果能够保留它，那么浏览器将能够通过选项卡跟踪用户进度，并且后退按钮将使用户进入前一个选项卡。

您可以将# 值存储在window.location 的hash 属性中。

请看下面的答案

Bootstrap 3: Keep selected tab on page refresh

这可能会为您提供解决方案。

之后，您保留了哈希，现在可以通过捕获 javaScript 的 onhashchange 事件来计算浏览器的后退按钮来处理您的转换。

在这里，您可以在用户点击浏览器时更改选项卡。

希望这会有所帮助。

【讨论】：

【解决方案4】：

如果我理解正确，我会简单地创建一个存储点击的会话。您可以使用 ajax 在单击时进行注册并远程设置会话来快速轻松地完成此操作。每次用户单击选项卡时，都会替换此会话。这将持续保持上次单击的选项卡的会话。以下是所需三个元素的结构：

1.您在此问题中放置的标签部分(HTML)

2. Ajax post 将选择的选项卡发送到远程文件以进行会话存储(JS)

3. 将接收选项卡值以存储在会话中的远程文件(PHP)

AJAX 发布 这个 sn-p 将监听用户单击选项卡，然后将选择的值发送到 php 文件进行保存。您可以将其放入单独的文件中或直接放在页面的页脚中。确保让 jquery 在您的页面上运行。

$(".icon-cross").on("click",function(){
   var tabValue = $(this).attr('href');
   $.post('file-to-save-session.php', {tabSel: tabValue}, function(data){
       console.log(data);
   });
});

快速解释...我们监听带有类（icon-cross）的选项卡被点击，然后我们将href属性的值存储到var tabValue中。然后我们通过 ajax 将值发布到 php 文件中进行保存。保存后，它将回显检索到的值，并且该函数会将其显示在控制台中以供查看和调试。

PHP 文件 - 保存选项卡选择 此文件可以存储在文件系统中的任何位置，只需确保在 ajax 请求中正确指向路径即可。

<?php 

session_start(); 

if(isset($_POST['tabSel']) && $_POST['tabSel'] != ''){
   $_SESSION['selected_tab'] = $_POST['tabSel'];
   echo $_SESSION['selected_tab'];
}else{
   echo 'NO TAB SELECTION RECEIVED!';
}

?>

这是不言自明的。它正在使用通过 ajax post 发送的变量监听页面的帖子。如果帖子已发送并且帖子不为空，它将将该值存储到会话中。如果不是，它将不返回任何内容，也不会触及会话本身。

您的带有标签的 HTML 文件 最后但同样重要的是，您现在可以将此代码 sn-p 添加到页面顶部，以查看用户最后选择的标签的值。 这将出现在您的标签所在的页面上。如果还没有，您可能需要将 html 文件转换为 php

<?php 
session_start(); 

if(isset($_SESSION['selected_tab'])){ 
    echo $_SESSION['selected_tab']; 
}
?>

现在您将能够在您的页面上看到之前选择的标签。您可以将其存储到 php 变量中，或者简单地将会话放入 if 语句中以突出显示或显示最后选择的选项卡。

希望这会有所帮助！如果您在这件事上需要更多帮助，请告诉我:)。

更新：覆盖由插件添加的 JAVASCRIPT： 将此添加到页面底部（在所有 js 文件下）

<?php if(isset($_SESSION['selected_tab'])){ ?>
    <script>
       $(".icon-cross").removeClass('tab-current');
       $("section").removeClass('content-current');
       $('[href="<?php echo $_SESSION['selected_tab']; ?>"]').addClass('tab-current');
       $('section<?php echo $_SESSION['selected_tab']; ?>').addClass('content-current');
    </script>
<?php } ?>

前两行将从所有选定的选项卡及其标题中删除当前类，第二行会将类添加到会话中保存的选项卡中。如果没有会话，则此代码将不会运行。

【讨论】：

它只能部分工作。在左上角，最后选择的选项卡正确显示，但如果我返回它不会选择相应的选项卡。我猜它可能是标签框架？我使用这个：tympanus.net/codrops/2014/03/21/responsive-full-width-tabs 如果我在 URL 栏中输入以下链接，该选项卡也不会更改：127.0.0.1/?p=products#section-4
如果您查看文件源，是否选择了两个选项卡？这可能是因为框架正在覆盖选项卡选择。如果有一个类被添加到选定的选项卡，请检查该类是否也被另一个选项卡选择。例如，我看到，选择新选项卡时，它将class=“Content-Current”添加到该部分。 span>
要在页面的最底部覆盖它，您可以在答案末尾添加我在此处添加的代码。

【解决方案5】：

我想你需要看看这个https://css-tricks.com/using-the-html5-history-api/

【讨论】：

答案应该有足够详细的解释，以便 OP 解决他们的问题。然后可以使用该链接在底部注明来源。