当 div 显示在上一个 HTML 页面上时，它如何在下一个 HTML 页面上保持显示显示？答案

【问题标题】：How can the div remain as display show on the next HTML page when it was showing on the previous HTML page?当 div 显示在上一个 HTML 页面上时，它如何在下一个 HTML 页面上保持显示显示？
【发布时间】：2020-11-19 14:48:04
【问题描述】：

在 20 个 HTML 页面中的每一个中，我都有这个 div 元素，它具有当前显示的不同内容：none;。我使用 javascript 来显示或隐藏 div。在其中一个 HTML 页面上，我可以显示这个 div（变为显示：块），并且我有一个按钮，允许我单击下一个 div（下一个 HTML 页面）和上一个 div（上一个 HTML 页面）。我在这里遇到的问题是下一页将重新加载，它将显示 div 为 display: none 当我真的希望它显示时：块，因为前一个 HTML 页面显示了 div（是 display: 块）。

我想到的一种方法是，当我在其中一个 HTML 页面上单击显示 div（显示：块）时，其他 19 个页面将共同显示：块，直到我隐藏 div（显示：无）。 理想情况下，我想要这种方法。

我一直在阅读的另一种方法是将站点的数据保存在 localStorage 或 cookie 中。所以下一页可以加载该数据并使 div 显示：块。我不明白这一点，我不知道解决我遇到的问题是否有意义。

这是我目前拥有的：

HTML：

    <! -- omitted HTML code above and below this div -->
    <div id="container">
    <a name="index"></a>
    
    <a href="pgs/35.html#35" >
        <div class="button-fullscreen display-left-fullscreen">
            <div id="arrow-left-fullscreen"></div>
        </div>
    </a>

    <a href="pgs/1.html#1" >
        <div class="button-fullscreen display-right-fullscreen">
            <div id="arrow-right-fullscreen"></div>
        </div>
    </a>

    <img id="artwork-fullscreen" src="img/team1.jpg" />
    <img id="fullscreen-exit" onclick="openFullscreen()" src="img/fullscreen_exit-white-24dp.svg">

</div>

Javascript：

function openFullscreen() {
  var x = document.getElementById("container");

  if (x.style.display === "none") {

      x.style.display = "block";

  } else {
      x.style.display = "none";

  }
}

【问题讨论】：

阅读单页应用程序，url 可以更改，但您在应用程序中的所有 url 共享相同的 DOM。
我有 20 个 HTML 页面，当前显示的 div 相同：无；。我用javascript打开了div。不，你有20个不同的div元素，div不能是open或closed。
@AdrianBrand 阅读了单页应用程序，但认为它不适合我的目标。我将坚持使用多页应用程序框架。感谢您的评论！
@ScottMarcus 是
通常称为 div、div 元素还是 div 标签？谢谢！
两者。标签是被解析的 HTML 中的文本，元素是在 DOM 中创建的对象。

【解决方案1】：

我可以考虑两种解决方案。您可以将 GET 参数添加到 URL 并在 javascript 中读取它以确定该元素是否应该被阻止。因此，您的 URL 可能如下所示：http://example.com/?block=true 只是一个快速而肮脏的例子让它得到一个想法：

var test;
const queryString = window.location.search;
queryString.split("?").map(function(elem){ test = elem.split("=") });

当然，您还应该检查参数是否存在。如果不是，则不应显示它。

或者，如您所说，您可以使用 localStorage 来存储此值。像这样。

if(!!localStorage.getItem('isBlock')){
  element.setAttribute('style', 'display: block;');
}else{
  element.setAttribute('style', 'display: none;');
}

function onButtonClick(){
  localStorage.setItem('isBlock', 'true');
}

!!localStorage.getItem('isBlock') 在这里有两个用途。它检查该值是否为真或是否为空。所以!!(true) 的结果为真，而!!(false) 和!!null 的结果为假。

这里的问题是你不知道前一页的状态。因此，当您单击按钮进入上一页时，上一页并不知道您将按钮更改为阻止。因此，您需要将应用程序的状态存储在某处。 URL 或 localStorage 通常是您执行此类操作的地方。

【讨论】：

两种都试过了，还是很困惑。对于第一个，我不确定如何检查参数是否存在。存储为 test (test = elem.split("="); ) 的内容是否成为 var test 的新值？