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. 史阵：

   变种history_array = [];
   function show（idx）{
   hide（）;
   content [idx] .style.visibility ='visible';
   historyArray [] = idx;
   }

然后可以调用上的Go-后退按钮show(historyArray[historyArray.length-1]);。您还需要使用historyArray.splice(historyArray.length-1, 1);删除阵列的最后一个索引。

你随身背扣因此脚本应该是这样的： 返回 如果它达到你可能要决定历史上的最大规模和拼接数组的第一个元素，但是这由你决定。

1. 解释elclanrs代码，我已经在上面的例子中使用它，以及：

首先，他把类“内容”到阵列中的“内容”的每个元素。 他呼吁显示（）与每个页面的标识符。在show（）中他首先调用hide（）。 hide（）遍历类“content”的每个元素，并将这些元素的可见性设置为“hidden”。 之后，show（）使用标识符（int）作为数组“content”的索引，并将该元素设置为“visible”。

这有点像：“隐藏的一切，并告诉我的第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事件。

它仍然会抛出内容[idx]未定义的初始错误，但它起作用，我无法在现场摆脱那一个，首要任务是提供功能修复 - 错误可能是由于装货单。