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

Question

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

我用 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>

项目.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;
}

Answer 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 问题localStorage、sessionStorage、session 和 cookie 有什么区别？

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

Answer 2

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

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

Answer 3

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

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

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

选项：

首先 - 创建一个表单行：

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

然后你TargetPage内，retrience从URL查询字符串，找到更多关于这个这里

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