javascript返回#url

Question

我正在測試一種方法，該方法包括簡單的javascript來切換不同的內容，而不是鏈接到其他頁面。 但是問題是，如果我這樣做，瀏覽器實際上會呈現所有“頁面”，但僅顯示其中的部分內容。 因此，它沒有歷史記錄，只有后面跟着不同的網址。 我嘗試使用goback(-1)無法正常工作。 還沒有嘗試document.referrer 。 那么問題是，有沒有一種方法可以存儲歷史記錄並將其添加到瀏覽器？ 我檢查了歷史記錄是只讀的，但是只有當我可以在上面存儲歷史記錄時，我才能在html中添加返回按鈕。 這是JavaScript部分：

function showHome(){
document.getElementById('content1').style.visibility="visible";
document.getElementById('content2').style.visibility="hidden";
document.getElementById('content3').style.visibility="hidden";
document.getElementById('content4').style.visibility="hidden";
document.getElementById('content5').style.visibility="hidden";
document.getElementById('content6').style.visibility="hidden";
}
function showAbout(){
document.getElementById('content1').style.visibility="hidden";
document.getElementById('content2').style.visibility="visible";
document.getElementById('content3').style.visibility="hidden";
document.getElementById('content4').style.visibility="hidden";
document.getElementById('content5').style.visibility="hidden";
document.getElementById('content6').style.visibility="hidden";
}
function showService(){
document.getElementById('content1').style.visibility="hidden";
document.getElementById('content2').style.visibility="hidden";
document.getElementById('content3').style.visibility="visible";
document.getElementById('content4').style.visibility="hidden";
document.getElementById('content5').style.visibility="hidden";
document.getElementById('content6').style.visibility="hidden";
}
function showProjects(){
document.getElementById('content1').style.visibility="hidden";
document.getElementById('content2').style.visibility="hidden";
document.getElementById('content3').style.visibility="hidden";
document.getElementById('content4').style.visibility="visible";
document.getElementById('content5').style.visibility="hidden";
document.getElementById('content6').style.visibility="hidden";
}
function showClient(){
document.getElementById('content1').style.visibility="hidden";
document.getElementById('content2').style.visibility="hidden";
document.getElementById('content3').style.visibility="hidden";
document.getElementById('content4').style.visibility="hidden";
document.getElementById('content5').style.visibility="visible";
document.getElementById('content6').style.visibility="hidden";
}
function showContact(){
document.getElementById('content1').style.visibility="hidden";
document.getElementById('content2').style.visibility="hidden";
document.getElementById('content3').style.visibility="hidden";
document.getElementById('content4').style.visibility="hidden";
document.getElementById('content5').style.visibility="hidden";
document.getElementById('content6').style.visibility="visible";
}

這是我的導航：

<ul id="nav" class="grey,menu">
<li><a id="Contact" href="#Contact" onclick="showContact()" class="descriptionContact">Contact<span>Contact description</span></a></li>
<li><a id="Client" href="#Client" onclick="showClient()" class="descriptionClient">Client<span>Client description</span></a></li>
<li><a id="Projects" href="#Projects" onclick="showProjects()" class="descriptionProjects">Projects<span>Project description</span></a></li>
<li><a id="Service" href="#Service" onclick="showService()" class="descriptionService">Service<span>Service description</span></a></li>
<li><a id="About" href="#About" onclick="showAbout()" class="descriptionAbout">About<span>description</span></a></li>
<li><a id="Home" href="#Home#" onclick="showHome()" class="descritionHome">Home<span>Return to main page, all update news are here</span></a></li>

頁：

<div class="content" id="content2"><div id="contenter">page2</div></div>
<div class="content" id="content3"><div id="contenter">page3</div></div>
<div class="content" id="content4"><div id="contenter">page4</div></div>
<div class="content" id="content5"><div id="contenter">page5</div></div>
<div class="content" id="content6"><div id="contenter">page6</div></div>

Answer 1

進一步談談評論的細節：

1. 歷史記錄數組：

   var history_array = [];
   函數show（idx）{
   隱藏（）;
   content [idx] .style.visibility ='visible';
   historyArray [] = idx;
   }

然后可以調用show(historyArray[historyArray.length-1]); 在“返回”按鈕上。 您還需要使用historyArray.splice(historyArray.length-1, 1);刪除數組的最后一個索引historyArray.splice(historyArray.length-1, 1); 。

因此，在“返回”按鈕上的腳本應如下所示：返回您可能想要確定歷史記錄的最大大小，並在到達數組的第一個元素時對其進行拼接，但這取決於您。

1. 解釋elclanrs代碼，正如我在上面的示例中已經使用過的那樣：

首先，他將類“ content”的每個元素放入數組“ content”。 他調用帶有每個頁面標識符的show（）。 在show（）中，他首先調用hide（）。 hide（）遍歷類“ content”的每個元素，並將其可見性設置為“ hidden”。 然后，show（）使用標識符（int）作為數組“內容”的索引，並將該元素設置為“可見”。

有點像：“隱藏所有內容，向我展示我剛剛單擊的第n個元素”

編輯：由於后續時間太長，只能發表評論：

在腳本標簽的頂部添加以下功能：

 onload=function(){ if (document.getElementsByClassName == undefined) { document.getElementsByClassName = function(className) { var hasClassName = new RegExp("(?:^|\\\\s)" + className + "(?:$|\\\\s)"); var allElements = document.getElementsByTagName("*"); var results = []; var element; for (var i = 0; (element = allElements[i]) != null; i++) { var elementClass = element.className; if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass)) results.push(element); } return results; } } show(0); 

}

然后替換： var content = document.querySelectorAll('.content');

使用： var content = document.getElementsByClassName('content');

然后，從-tag中刪除onload-event。

它仍然會引發一個初始錯誤，即未定義content [idx]，但它可以正常工作，並且我無法即刻擺脫該錯誤，首要任務是提供功能修復程序-該錯誤可能是由加載順序引起的。