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

Если кто-то имеет некоторые улучшения для обмена, будут приветствоваться ! Мне нужно симулировать щелчок на моей вкладке, потому что у некоторых из них есть другие события, связанные с ними, и мне нужно их хранить.

Answer 2

Вы можете использовать локальное хранилище или хранилище сеансов, чтобы сохранить свой пример истории вкладок localstorage.setItem ('selectedTab', 'TAB_ID');