Используйте кнопку назад браузера после изменения html-контента с помощью jQuery

Question

Я изменяю html-содержимое div с помощью jQuery при нажатии на ссылку.

<a href="#1" class="navclick" data-content="1">1</a>
<a href="#2" class="navclick" data-content="2">2</a>
<a href="#3" class="navclick" data-content="3">3</a>

Поэтому при нажатии мой код jQuery меняет html-содержимое.Можно ли как-нибудь снова заставить работать кнопку назад в браузере и изменить содержимое, нажав на нее?Он действительно изменяет URL, но, конечно, он не меняет содержимое с fe # 3 на # 1, когда я нажимаю кнопку «Назад».

Найденные мной библиотеки устарели.Каков наилучший способ сделать это в настоящее время?

Спасибо!

Редактировать:

Вот как я загружаю содержимое в div содержимого:

$('#content').hide().load($content+".html" , function(){
        $('#content').fadeIn('slow');
        var stateObj = { foo: $content };
        history.pushState(stateObj, $content, $content+".html");
        console.log(history);
    });

Answer 1

Да, конечно, есть. Как только вы измените свой HTML-контент, сделайте pushstate.

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

Теперь это добавит bar.html к вашему URL, поэтому, когда вы нажмете назад, он не уйдет с текущего сайта, но "Просто" вернется в историю.

Вы можете поймать нажатие на кнопку "Назад" следующим образом:

$(window).on("popstate", function(e) {
  alert("Pressed back or forward");
});

Обратите внимание, что popstate срабатывает при щелчке назад и вперед. поэтому вам нужен способ проверить, нажимает ли пользователь назад. Но я оставлю это на ваше усмотрение; -)