0

我正在测试一种包含简单 javascript 的方法来切换不同的内容，而不是链接到其他页面。但是问题是如果我这样做，浏览器实际上会呈现所有“页面”，但只显示它的部分内容。因此它没有历史，只有不同的 url。我试过用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>
4

1 回答 1

0

稍微了解一下评论的细节：

  1. 历史数组：

    var history_array = [];
    函数显示（idx）{
    隐藏（）；
    内容[idx].style.visibility = '可见';
    historyArray[] = idx;
    }

然后，您可以调用show(historyArray[historyArray.length-1]);返回按钮。您还需要使用删除数组的最后一个索引historyArray.splice(historyArray.length-1, 1);。

因此，您在 Go-back 按钮上的脚本应该如下所示： Go Back 您可能想要决定历史的最大大小，如果达到，则拼接数组的第一个元素，但这取决于您。

  1. 解释 elclanrs 代码，因为我已经在上面的示例中使用了它：

首先，他将“content”类的每个元素放入数组“content”中。他使用每个页面的标识符调用 show()。在 show() 中，他首先调用 hide()。hide() 迭代“内容”类的每个元素，并将这些元素的可见性设置为“隐藏”。之后 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] 未定义的初始错误，但它可以工作，我无法当场摆脱那个错误，首要任务是提供功能修复 - 该错误可能是由加载顺序引起的.

于 2013-04-10T07:34:19.973 回答