如何在另一个 html 页面中显示/隐藏 div答案

【问题标题】：How to display/hide a div in another html page如何在另一个 html 页面中显示/隐藏 div
【发布时间】：2020-04-02 23:30:17
【问题描述】：

我有两个 html 页面（produse.html 和 item.html）和其中一个中的菜单。当我从菜单中单击一个链接时，我需要转到另一个页面，同时显示一个特定的 div 并从 item.html 隐藏原始的。

我在javascript中使用onclick方法进行了尝试，但它不起作用。我认为问题在于 javascript 代码无法获取另一个页面中 div 的类名。

有什么可以做的吗？

这是我试过的代码。

produse.html

    <div class="sideMenu">
        <a href="item.html" onclick="displayTheBox(0); return false;">prod 1</a>
        <a href="item.html" onclick="displayTheBox(1); return false;">prod 2</a>
        <a href="item.html" onclick="displayTheBox(2); return false;">prod 3</a>
        <a href="item.html" onclick="displayTheBox(3); return false;">prod 4</a>
    </div>

item.html

    <div class="displayBox yes">
        1
    </div>

    <div class="displayBox">
        2
    </div>

    <div class="displayBox">
        3
    </div>

    <div class="displayBox">
        4
    </div>

javascript

var prevN = 0;

function displayTheBox(n){
    var products = document.getElementsByClassName("displayBox");

    products[prevN].className = products[prevN].className.replace(" yes", "");
    products[n].className += " yes";

    prevN = n;
}

css

.displayBox{
    float: left;
    height: 200px;
    overflow: auto;
    position: relative;
    box-shadow: 1px 1px 4px 2px #9b9b9b;
    background-color: #bbe5f8;
    border-radius: 6px;
    width: 995px;
    margin: 0 0 0 235px;
    display: none;
}
.yes{
    display: block;
}

【问题讨论】：

将 url 变量添加到链接中，例如 href="item.html?hide=0" 然后当您转到该页面时，您可以读取变量并适当地隐藏。
您可以将参数存储在用户浏览器的LocalStorage中，然后根据显示与否。即使在刷新后它也会保持不变，并且链接将是相同的。
有两种方法可以管理这个 1. 将值传递给 url 参数，2. 将其设置为本地/会话存储
或者，将所有内容放在一个主页中，并通过 AJAX 加载不同的内容
没错，如果 OP 想使用类似的方法，他应该研究 React 或 Vue，因为您可以制作单独的组件并将它们链接在一起

标签： javascript html css

【解决方案1】：

JS 是一个客户端脚本，它的变量在页面加载时被重置。您可以通过作为 GET 参数传递值或通过使用 localStorage 或 cookie 保存和检索持久数据来传递值。

这里是一个简单的js函数，获取GET变量和处理函数。

function findGetParameter(parameterName) { // Gets the GET variables
    var result = null,
        tmp = [];
    var items = location.search.substr(1).split("&");
    for (var index = 0; index < items.length; index++) {
        tmp = items[index].split("=");
        if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
    }
    return result;
}

if(findGetParameter("item")) { // Check if parameter matches
   displayTheBox(findGetParameter("item"));
}
var prevN = 0;

function displayTheBox(n) {
    var products = document.getElementsByClassName("displayBox");

    products[prevN].className = products[prevN].className.replace(" yes", "");
    products[n].className += " yes";

    prevN = n;
}

将您的超链接更改为

<div class="sideMenu">
    <a href="item.html?item=0">prod 1</a>
    <a href="item.html?item=1">prod 2</a>
    <a href="item.html?item=2">prod 3</a>
    <a href="item.html?item=3">prod 4<a>
</div>

有关存储方法的更多信息，请查看此 SO 问题What is the difference between localStorage, sessionStorage, session and cookies?

有关 js 会话存储的一个很好的示例，请在此处查看对 SO 问题的答案https://stackoverflow.com/a/49805713/6060602

【讨论】：

【解决方案2】：

通过像这样的正常点击事件是不可能的。

两个页面需要交互，由于请求是无状态的，属于一个页面的所有内容都只存在于那里，而没有其他地方。

因此，要执行此操作，您需要通过请求对象传递通信。

选项：

首先 - 创建一个表单行：

<form action="targetPage" method="get">
    <input type="hidden" value="hideSomething" />
    <button></button>
</div>

然后在您的 TargetPage 中，从 URL 中检索查询字符串，了解有关此 here 的更多信息

第二 - 您不确定这是否是您想要采取的正确方法。仔细研究你想要达到的目标，看看它是否真的有必要。我不确定您为什么要将这些按钮（sideMenu）放在它们自己的页面上，与您要控制的框的位置分开。

【讨论】：

【解决方案3】：

实际上，当您在一个页面中进行函数调用时，它无法反映在另一个页面中。你必须使用后端来完成这项工作。但是根据您的问题，您可以使用 PHP 之类的语言来完成这项工作。否则，您可以在打开新页面时在开头进行函数调用。喜欢， window.onload() 或者 jQuery 在这种情况下也可能会有所帮助，

$(document).ready(function() { /* code here */ });

【讨论】：