时间戳

首页 > 解决方案 > 当 div 显示在上一个 HTML 页面上时，它如何在下一个 HTML 页面上保持显示显示？

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

问题描述

在 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";

  }
}

标签： javascripthtmljquery

解决方案

我可以考虑两种解决方案。您可以将 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 通常是您执行此类操作的地方。

推荐阅读