时间戳

首页 > 解决方案 > 一个 HTML 文件/页面中的多个页面，超过 2 页

javascript - 一个 HTML 文件/页面中的多个页面，超过 2 页

问题描述

我知道<script>元素可以有function show(shown, hidden)它。但是其中有 2 页 ( {document.getElementById(shown).style.display='block'; document.getElementById(hidden).style.display='none'; return false;)，我不知道如何使该页数更多。有什么帮助吗？

PS我对几乎任何事情都持开放态度。我不能保证您的回答会有所帮助，但我也许可以使用您的建议来解决这个问题。

我已经尝试了更多的东西，function show(shown, hidden, hidden, hidden)但这并没有帮助。

我被困住了。我研究了我能找到的任何东西。我想不通。

请帮我。

我想要建议的具体代码是这样的：

<script>
function show(shown, hidden) {
  document.getElementById(shown).style.display='block';
  document.getElementById(hidden).style.display='none';
  return false;
}
</script>

与一些<div>s。

我知道这可能无法帮助您弄清楚如何帮助我，但我需要知道。（我讨厌完整的 JavaScript！）

标签： javascripthtml

解决方案

<!doctype html>
<html lang="en">
<head>
  <title>Multi but Single Page</title>
  <meta charset="utf-8">
  <style>
      .templates {
          display: none;
      }
  </style>
  <script>
// we save all templates in an global Variable
var templateStack = [];

// https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
function getParameterByName(name, url) {
    url = url || window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

window.addEventListener('load', function (e) {
    // get all hidden template elements
    var templates = document.getElementsByClassName('templates');
    for (var i = 0, v; v = templates[i]; i++) {
        // each Child Node is a new Page
        for (var j = 0, x; x = v.childNodes[j]; j++) {
            // at least if it's an element
            if (x.nodeType === Node.ELEMENT_NODE) {
                templateStack.push(x);
            }
        }  
    }
    // uri support ?page=1 loads Page 2 and ?page=0 loads Page 1, default is 0
    var pageIndex = getParameterByName('page') || '0';
    // so we can test it with a Browser by just insert 'loadPage(1)'
    loadPage(pageIndex);
});

function loadPage(index) {
    // only valid indexes
    if (index >= templateStack.length || index < 0) {
        document.body.innerText = '404 Page not found';
        return;
    }
    // clean everything in our page
    document.body.innerHTML = '';
    // append our fetched Page out of our Global Variable
    document.body.appendChild(templateStack[index]);
}
  </script>
</head>
<body>
    <div class="templates">
        <div>
            <h3>Page 1</h3>
            <p>
                Welcome to Page 1
            </p>
            <a href="#" onclick="loadPage(1)">Load Page 2</a>
        </div>
        <div>
            <h1>Page 2</h1>
            <p>
                Our Page 2
            </p>
            <a href="#" onclick="loadPage(0)">Back to Page 1</a>
        </div>
    </div>
</body>
</html>

推荐阅读