One single page of several pages using hash #

Question

I do singlepage from some pages.

I use <script type="text/template" id="id_****">content...</script>
to store this pages in index file. Here you have an example:

Simple example

When I clicked hyperlink Browser need use # (hash) in URL. I need navigation with #.

I use window.location but I really don't know where to begin. Here you have the way I have tried to do:

My attempt

I added div id="putIn" to put this page in.

Should work just with JavaScript!

This is where I started from http://www.johnpapa.net/spa/, And I ended up using the durandaljs framework in the end for SPA development, not sure if that's feasible for you. — BuddhiP, May 27 '14 at 13:54
Why use javascript? `name="foo"` would be scrolled to when accessing `url.php#foo`. — h2ooooooo, May 27 '14 at 13:56

score 0 · Accepted Answer · edited May 23 '17 at 10:32

Here's a fork of your Plunker: http://plnkr.co/edit/xyPqyl20C4sVL11KqNCS?p=preview

What was changed:

The navigation buttons (forward and back) were given an unique class navigate

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

The href attributes were changed to represent the next and previous pages (id_1, id_2, id_X, ...)

Because the navigation links change with the page, an onclick listener was added to the 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);
    }
};

(Source: Click event on dynamic element WITHOUT jQuery )

Created function move() to change between pages.

  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;

    }
  }

A better solution would be to move the navigation links outside the #putIn div and just keep track of what "page" is currently displayed. This would enable you to add / remove pages without the need to update the code.

Thanks. Just in my case I have different count of buttons with different function. — user3679891, May 27 '14 at 15:01

One single page of several pages using hash #

1 Answers1