javascript - 具有历史、兼容性的 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

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

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

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