Question

我的网站上有一个相当简单的部分，其中很少有带有锚框的div。单击其中一个锚点后，div被隐藏，另一个div出现。其中一些锚框是指向我网站其他页面的链接。我还有一个后退按钮，显示最后一个可见的div。这是我制作的非常详细的jsfiddle-https://jsfiddle.net/wy5kzv7d/17/。

类别为.box.link的锚点将导致一个新页面，而如果锚点只有.box，它将隐藏当前包装并显示其他包装。

有没有一种方法可以记住在打开新页面后使用后退按钮或单击链接时隐藏了哪些div，显示了哪些div？我尝试使用http://www.asual.com/jquery/address/，但是文档有点不好，它的最新更新时间是8年前，很遗憾，我无法使其正常工作。我也不太确定这是否就是我需要使用的库。

编辑1：我找到了这个JSFiddle-http://jsfiddle.net/hut65tja/1/，并试图将其实现到我的代码中，但是它不能正常工作。如何使全球演出限于$(this)？这是一个新的JSfiddle-https://jsfiddle.net/wy5kzv7d/19/

$(document).ready(function () {
  var show = sessionStorage.getItem('show');

  if(show === 'true'){
    $('.level').css('display', 'flex').hide().delay(150).fadeIn();
  }

  $('.box').click(function () {
    event.preventDefault();

    // If it is not end point (link) always hide it's parent
    if (!$(this).hasClass('link')) {
        $(this).parent('.level').fadeOut(150);
        sessionStorage.setItem('show', 'false');
    }

    const goDeeper = `.${$(this)[0].classList[0]}-wrapper`;
    // console.log(goDeeper);
    $(goDeeper).css('display', 'flex').hide().delay(150).fadeIn();
    sessionStorage.setItem('show', 'true');

  });

  // Back Button JQuery
  $('.catalog-back-button').click(function () {
    if ($('.level3').is(':visible')) {

        $('.level3').hide();
        $('.level2.mebeli-wrapper').delay(100).fadeIn();

    } else if ($('.level2').is(':visible')) {

        $('.level2').hide();
        $('.level1').delay(100).fadeIn();

    }
  });

});

存储.css（'display'）值，然后在其他页面上单击按钮返回

0 个答案: