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

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