浏览器后退/下一步按钮在选项卡之间导航

Question

我收到了很多用户的抱怨，说当他们使用我的基于 jQuery 的选项卡时，他们发现很烦人，当他们回击浏览器时，他们没有转到上一个选项卡而是转到上一页. 我添加了以下上一个/下一个按钮，但还不够。如何重新配置​​我的按钮，以便用户在单击浏览器后退箭头时转到上一个选项卡而不是上一个页面。你可以在这里测试它。

$('#quicktabs-registration_steps').append('<div class="prevnext"><a class="tablink-prev btn" href="#">Prev</a><a class="tablink-next btn btn-lg btn-primary" href="#">Continue</a></div>');
$('.tablink-prev').click(function () {
    var index = $('.quicktabs-tabs li.active').index();
    $('.quicktabs-tabs li').eq(index).removeClass('active');
    if (index == 0) {
        index = 1;
    }
    $('.quicktabs-tabs li').eq(index - 1).addClass('active');
    $('.quicktabs-tabs li').eq(index - 1).find('a').click();
    return false;
});
$('.tablink-next').click(function () {
    var length = $('.quicktabs-tabs').first().children().size();;
    var index = $('.quicktabs-tabs li.active').index();
    $('.quicktabs-tabs li').eq(index).removeClass('active');
    //                if (parseInt(index) == parseInt(length) - 1 ) {
    //                    index = index - 1;
    //                }
    if (parseInt(index) == parseInt(length) - 1) {
        window.location.href = '/home'; //redirect to home
        //index = index - 1;
    }
    $('.quicktabs-tabs li').eq(index + 1).addClass('active');
    $('.quicktabs-tabs li').eq(index + 1).find('a').click();
    return false;
});

Answer 1

您可以使用历史记录。

打开新选项卡时推送历史状态

history.pushState({page: 1}, "title 1", "?page=1")

参考：https : //developer.mozilla.org/en-US/docs/Web/API/History_API

Answer 2

如果没有你的完整代码，我不能给你一个定制的例子，但你可以简单地向每个包含 div 的选项卡添加锚标签。

这将在用户每次单击选项卡链接时更新 URL。这些 URL 更改将存储在浏览器历史记录中，并在向后导航时调用。

<div id="Tab1">
  <h2><a href="#Tab1">Tab 1</a></h2>
  <p>This tab content</p>
</div>

<div id="Tab2">
  <h2><a href="#Tab2">Tab 2</a></h2>
  <p>This tab content</p>
</div>

<div id="Tab3">
  <h2><a href="#Tab3">Tab 3</a></h2>
  <p>This tab content</p>
</div>

<div id="Tab4">
  <h2><a href="#Tab4">Tab 4</a></h2>
  <p>This tab content</p>
</div>

每次单击选项卡时，更新后的 URL 将如下所示：

https://example.com#Tab1

https://example.com#Tab2

https://example.com#Tab3

https://example.com#Tab4