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]，但它可以正常工作，并且我无法即刻摆脱该错误，首要任务是提供功能修复程序-该错误可能是由加载顺序引起的。