Multiple distinct pages in one HTML file

Solution 1:

Well, you could, but you probably just want to have two sets of content in the same page, and switch between them. Example:

<html>
<head>
<script>
function show(shown, hidden) {
  document.getElementById(shown).style.display='block';
  document.getElementById(hidden).style.display='none';
  return false;
}
</script>
</head>
<body>
    
  <div id="Page1">
    Content of page 1
    <a href="#" onclick="return show('Page2','Page1');">Show page 2</a>
  </div>
    
  <div id="Page2" style="display:none">
    Content of page 2
    <a href="#" onclick="return show('Page1','Page2');">Show page 1</a>
  </div>
    
</body>
</html>

(Simplified HTML code, should of course have doctype, etc.)

Solution 2:

I used the following trick for the same problem. The good thing is it doesn't require any javascript.

CSS:

.body {
     margin: 0em;
}

.page {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: -100vw;
    overflow-y: auto;
    z-index: 0;
    background-color: hsl(0,0%,100%);
}

  .page:target {
    left: 0vw;
    z-index: 1;
}

HTML:

<ul>
    <li>Click <a href="#one">here</a> for page 1</li>
    <li>Click <a href="#two">here</a> for page 2</li>
</ul>

<div class="page" id="one">
    Content of page 1 goes here.

    <ul>
        <li><a href="#">Back</a></li>
        <li><a href="#two">Page 2</a></li>
    </ul>
</div>

<div class="page" id="two">
    Content of page 2 goes here.

    <ul style="margin-bottom: 100vh;">
        <li><a href="#">Back</a></li>
        <li><a href="#one">Page 1</a></li>
    </ul>
</div>

See a JSFiddle.

Added advantage: as your url changes along, you can use it to link to specific pages. This is something the method won't let you do.

Hope this helps!

Solution 3:

have all the pages in distinct div areas

<div style="" id="page1">
First Page Contents
</div>

<div style="display:none" id="page2">
Second Page Contents
</div>

then use a js script to workout what you are viewing (like within an hashtag style) to navigate. Either that, or ajax to get the response from a specific file (like /pages/page1.html)

var $prehashval = "";
function loop()
{
    if (location.hash.slice(1)!=$prehashval)
        hashChanged();

    $prehashval = location.hash.slice(1);
    setTimeout("loop()", 100);
}
function hashChanged()
{
    var $output;
    switch (location.hash.slice(1))
    {
        case "page1":
            document.getElementById('page1').style.display = "";
            document.getElementById('page2').style.display = "none";
            break;
        case "page2":
            document.getElementById('page1').style.display = "none";
            document.getElementById('page2').style.display = "";
            break;
        default:
            $output = location.hash.slice(1);
    }
}
loop();

Multiple distinct pages in one HTML file

Solution 1:

Solution 2:

Solution 3:

Related

Recent Posts