如何在另一個 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 ）放在自己的頁面上，與您要控制的框所在的位置分開。