Question

我从某些页面单打页面。

我使用<script type="text/template" id="id_****">content...</script>
来将这些页面存储在索引文件中。这里有一个例子：

Simple example

当我点击超链接时，浏览器需要在URL中使用＃（hash）。我需要使用＃。

进行导航

我使用window.location但我真的不知道从哪里开始。在这里你有我试过的方式：

My attempt

我添加 div id =“putIn”将此页面放入。

应该只使用JavaScript！

Answer 1

这是你的Plunker的一个分支：http://plnkr.co/edit/xyPqyl20C4sVL11KqNCS?p=preview

改变了什么：

导航按钮（前进和后退）获得了一个独特的课程navigate

<a href="#" class="navigate" id="back">back</a>
<a href="#" class="navigate" id="forw">forward</a>

href属性已更改为代表下一页和上一页（id_1，id_2，id_X，...）

由于导航链接随页面而变化，因此onclick添加了document个侦听器。

//Listen to all clicks
document.onclick = function(event) {
    var el = event.target;
    //If we clicked a navigation link
    if (el.className == "navigate" && el.nodeName == "A") {
        //Change the page
        move(el);
    }
};

（资料来源：Click event on dynamic element WITHOUT jQuery）

创建函数move()以在页面之间切换。

  function move(el)
  {
    if (el.getAttribute("href"))
    {
      //Get hash without #
      var hash = el.getAttribute("href").split("#")[1];
      //Change content based on hash
      document.getElementById("putIn").innerHTML = document.getElementById(hash).innerHTML;

    }
  }

更好的解决方案是将导航链接移到#putIn div之外，并跟踪当前显示的“页面”。这样您就可以添加/删除页面而无需更新代码。

使用hash＃的几页的单页

1 个答案: