JS/JQUERY 选项卡与历史记录，兼容性

Question

好的，我有一个网站，其中有几个选项卡显示不同的东西。我做了一件非常简单的事情来管理选项卡：

.HTML：

<li id="thing1" class="tab selected"></li>
<li id="thing2" class="tab"></li>
<li id="thing3" class="tab"></li>
<div id="_thing1" class="box"></div>
<div id="_thing2" class="box hidden"></div>
<div id="_thing3" class="box hidden"></div>

JS/JQUERY：

$(".tab").on('click', function() {
        $(".tab").removeClass('selected');
        $(this).addClass('selected');
        $(".box").addClass('hidden');
        $( '#_' + $(this).attr('id') ).removeClass('hidden');
    }); 

一切正常，但我正在尝试将历史记录添加到我的标签单击中，因此当您单击浏览器时，您将转到您访问过的最后一个选项卡。

我

做了一些研究，我有点困惑，似乎我需要实现目标的很多东西都与所有浏览器不兼容。Jquery还没有实现与历史相关的东西。

例如：on（'hashchange'）似乎与每个浏览器都不兼容。

这是我开始的：

$(".tab").on('click', function() {
history.pushState({id: $(this).attr('id')}, $(this).attr('id'), '#'+$(this).attr('id'));
}

那么有什么方法可以在没有插件的情况下轻松实现我想要的呢？

Answer 1

好的，这就是我最终做的，如果它可以帮助某人：

.HTML：

<li id="thing1" class="tab first selected"></li>
<li id="thing2" class="tab"></li>
<li id="thing3" class="tab"></li>
<div id="_thing1" class="box"></div>
<div id="_thing2" class="box hidden"></div>
<div id="_thing3" class="box hidden"></div>

.JS：

var realclick = true; // prevent adding history on hashchange
$(".tab").on('click', function() {
    id = $(this).attr('id');
    $(".tab").removeClass('selected');
    $( '#' + id).addClass('selected');
    $(".box").addClass('hidden');
    $( '#_' + id ).removeClass('hidden');
    if (realclick) {
        history.pushState(null, null,  '#'+id);
    }
}); 
$(window).on('hashchange', function(e){ // triggered by browser, previous and next button
    var id ='';
    realclick = false;
    if (location.hash!='') { // if has hash
        id = $(location.hash+".tab").attr('id');
        $('#'+id).click();
    }
    else { // no hash = initial page
        id = $(".first.tab").attr('id');
        $('#'+id).click();
    }
    realclick = true;
});

如果有人有一些改进要分享，欢迎！我需要模拟单击我的选项卡，因为其中一些附加了其他事件，我需要保留它们。

Answer 2

您可以使用本地存储或会话存储来持久化选项卡历史记录，例如 localstorage.setItem（'selectedTab'"，"TAB_ID'）;