记住导航后的页面状态

Question

我有3个DIV，它们会在点击时显示。在任何时候，只有一个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();
    });
});

Answer 1

使用location.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>

我们只需要一点JavaScript即可设置默认哈希（如果不存在）

if(!location.hash) location.hash = "div1";

使用历史记录API-pushState

记住一种状态，当用户导航回到您的页面时-一种有用的方法是History API并从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>

一个人可以pushState元素的ID 选择器以显示：history.pushState({sel: sel}, null);，并在页面加载时使用history.state.sel

进行检索。

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');
        history.pushState({sel}, null);
        showElement(sel);
    });

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

});

使用存储API-localStorage

或者，您可以将选择器字符串存储到window.localStorage

_{（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"

});