Jquery 记住导航返回时的页面状态

我有3个

DIV

s，单击就会显示出来。任何时候只有一个DIV可见（其他DIV隐藏）

问题是，

#div1

具有指向其他子页面的超链接。从这样的子页面返回后（通过单击浏览器的“返回”按钮）

#div1

消失，滚动位置是它应该在的位置，但是

#div1

被隐藏。如何使浏览器在从子页面返回后能够记住此DIV状态和位置

$(function () {
    $('#showdiv1').click(function () {
        $('div[id^=div]').hide();
        $('#div1').show();
    });
    $('#showdiv2').click(function () {
        $('div[id^=div]').hide();
        $('#div2').show();
    });
    $('#showdiv3').click(function () {
        $('div[id^=div]').hide();
        $('#div3').show();
    });
});

使用location.hash 一种方法是利用浏览器已经提供的功能：锚定一个hash

href

，

window.location.hash

和CSS

：target

选择器

有这个HTML

<style>
    [id^="div"] {
        display: none;
    }
    [id^="div"]:target {
        display: block;
    }
</style>

<a href="#div1">div1</a>
<a href="#div2">div2</a>
<a href="#div3">div3</a>

<div id="div1">div1 <a href="//google.com">Google</a></div>
<div id="div2">div2 <a href="//stackoverflow.com">Stack Overflow</a></div>
<div id="div3">div3 <a href="//developer.mozilla.org">MDN</a></div>

使用historyapi-pushState 要记住用户导航回页面时的状态，一个有用的方法是从

state

对象中查找和检索自定义数据

鉴于此HTML：

<style>
    .none {
        display: none;
    }
</style>

<button type="button" data-show="#div1">div1</button>
<button type="button" data-show="#div2">div2</button>
<button type="button" data-show="#div3">div3</button>

<div id="div1">div1 <a href="//google.com">Google</a></div>
<div id="div2">div2 <a href="//stackoverflow.com">Stack Overflow</a></div>
<div id="div3">div3 <a href="//developer.mozilla.org">MDN</a></div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

使用存储API-本地存储 或者，您可以将选择器字符串存储到

（HTML和CSS与上一示例中相同）

使用location.hash 一种方法是利用浏览器已经提供的功能：锚定一个hash

href

，

window.location.hash

和CSS

：target

选择器

有这个HTML

<style>
    [id^="div"] {
        display: none;
    }
    [id^="div"]:target {
        display: block;
    }
</style>

<a href="#div1">div1</a>
<a href="#div2">div2</a>
<a href="#div3">div3</a>

<div id="div1">div1 <a href="//google.com">Google</a></div>
<div id="div2">div2 <a href="//stackoverflow.com">Stack Overflow</a></div>
<div id="div3">div3 <a href="//developer.mozilla.org">MDN</a></div>

使用historyapi-pushState 要记住用户导航回页面时的状态，一个有用的方法是从

state

对象中查找和检索自定义数据

鉴于此HTML：

<style>
    .none {
        display: none;
    }
</style>

<button type="button" data-show="#div1">div1</button>
<button type="button" data-show="#div2">div2</button>
<button type="button" data-show="#div3">div3</button>

<div id="div1">div1 <a href="//google.com">Google</a></div>
<div id="div2">div2 <a href="//stackoverflow.com">Stack Overflow</a></div>
<div id="div3">div3 <a href="//developer.mozilla.org">MDN</a></div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

使用存储API-本地存储 或者，您可以将选择器字符串存储到

（HTML和CSS与上一示例中相同）

jQuery( $ => {

    const $divs = $('[id^="div"]');
    const showElement = sel => {
        const $show = $(sel);
        $divs.not($show).addClass('none');
        $show.removeClass('none');
    }

    $('[data-show]').on('click', function () {
        const sel = $(this).data('show');
        localStorage.sel = sel;
        showElement(sel);
    });

    showElement(localStorage.sel || '#div1'); // Init. Fallback to "#div1"

});