Question

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

问题：

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

如果用户返回产品页面，我想记住上次使用的标签（此处为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所期望的（某些浏览器比这些标准更先进），但编程是什么常识期待它。恕我直言，当你克服一个属性的限制时，最重要的是尝试继续他们的自然行为，避免魔法＆＃39;功能和其他代码将来很难维护。 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);
   });
});

对于某种类型的信息，在过去，网络开发者（我不是那么老，但我在javascript上传这么棒的工具进入web开发常规程序之前编程）不能依赖于此很多关于脚本技术，所以他们做什么来传播某种行为已经将该锚存储到一些post / get变量中并使该值保持不变直到用户达到所需的例程，强制通过链接加载＃{$ desiredAnchor强制锚行为。显然，这是一种有缺陷和盲点的方法，但当javascript不是行业中的重要角色时，这种方法很常见。一些开发人员在从百货公司这样的小垫子中工作时可能需要这个想法，例如，垫子的浏览器太旧而不能与javascript ES4 / ES5 / ES6新功能一起使用。

Answer 2

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

1。您在此问题中放置的标签部分（HTML）

2. Ajax将选中的标签发送到远程文件进行会话存储（JS）

3. 将收到要在会话中存储的标签值的远程文件（PHP）

AJAX POST 此片段将侦听用户单击选项卡，然后将选定的值发送到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文件 最后但并非最不重要的是，您现在可以将此代码段添加到页面顶部，以查看用户最后选择的标签的值。 这将显示在您的标签所在的页面上。您可能需要将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 } ?>

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

Answer 3

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

因此，我们的目的是在#标签中保留href个链接。如果能够保留该浏览器，则浏览器将能够通过选项卡跟踪用户进度，后退按钮将使用户登录到上一个选项卡。

您可以将#值存储在hash的{{1}}属性中。

见下面的答案

Bootstrap 3: Keep selected tab on page refresh

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

之后，您已经保留了哈希，现在能够通过捕获javaScript的window.location事件来计算浏览器的后退按钮来处理转换。

此处，您可以设法在用户在浏览器中点击时更改标签页。

希望这会有所帮助。

Answer 4

为每个标签提供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
})

Answer 5

我认为您需要查看此https://css-tricks.com/using-the-html5-history-api/

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

5 个答案: