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'）;

JS / JQUERY TAB具有历史，兼容性

2 个答案: