具有历史记录、兼容性的 JS/JQUERY TAB

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

您可以使用本地存储或会话存储来持久化您的标签历史示例 localstorage.setItem('selectedTab','TAB_ID');

Answer 2

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

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;
});

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