一个html页面中的多个页面答案

【问题标题】：Multiple pages in one html page一个html页面中的多个页面
【发布时间】：2013-10-10 07:01:13
【问题描述】：

希望能够将多个不同的页面放入一个 html 页面中，类似于下面发布在这篇文章中的代码： Multiple distinct pages in one HTML file

但是，我希望在页面上方有一个固定的标题以允许导航。
例如，标题有 4 个链接（Link1、Link2 等）供用户选择。如果用户在哪里点击“Link2”，那么下面只会出现Link2，其他页面将保持隐藏状态。

告诉我，谢谢！

<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>

【问题讨论】：

您缺少一些代码。在 onclick 中，您使用了一种叫做“dijit”的东西，它在哪里声明，它是什么？如果你将你的 javascript 分离到 HTML 正文之外的某个地方，这会更容易。
刚刚用上面的新代码编辑了帖子，是否可以使用这段代码创建标题或有其他方法吗？
是的，有可能，但不是很灵活。我在下面做了一个例子，它可能更有用。那里常见的“标题”只是“显示第 1、2、3 页”。并且数字是可点击的。就像您的问题一样，实际内容隐藏在 DIV 的标题下方。

标签： javascript html css

【解决方案1】：

您可以只使用 ID，但如果您有很多页面，就会开始变得有点乏味。我建议使用一个类来进行隐藏。此外，如果您希望页面有一个共同的标题，您只需要从 HTML 元素构建它，然后在此处而不是在页面内容中显示页面链接。

我提出了一个替代建议，即向所有页面 DIV 添加一个“页面”类。然后你可以做的是隐藏所有具有“页面”类的DIV，并显示你想要的带有ID的DIV。这也不是一个非常灵活的系统，你不能轻易地做一个动态的页面数量或一个动态的首页，但它是一个开始的地方。这是我的例子：

这是在 JSFiddle http://jsfiddle.net/H4dbJ/ 但这是直接的代码：

// show the given page, hide the rest
function show(elementID) {
  // find the requested page and alert if it's not found
  const ele = document.getElementById(elementID);
  if (!ele) {
    alert("no such element");
    return;
  }

  // get all pages, loop through them and hide them
  const pages = document.getElementsByClassName('page');
  for (let i = 0; i < pages.length; i++) {
    pages[i].style.display = 'none';
  }

  // then show the requested page
  ele.style.display = 'block';
}

span {
  text-decoration:underline;
  color:blue;
  cursor:pointer;
}

<p>
  Show page 
  <span onclick="show('Page1');">1</span>, 
  <span onclick="show('Page2');">2</span>, 
  <span onclick="show('Page3');">3</span>.
</p>

<div id="Page1" class="page" style="">
  Content of page 1
</div>
<div id="Page2" class="page" style="display:none">
  Content of page 2
</div>
<div id="Page3" class="page" style="display:none">
  Content of page 3
</div>

进一步的开发思路包括：一个next/prev按钮，使用Page1 Page2...PageN页码作为变量，循环所有页面并显示最后一页。或显示第一个。之后，一个 Next/Previous 按钮在变量中跟踪当前页面，然后转到下一个。

【讨论】：

您好，我还有一个问题，要在代码之上进一步构建，如何添加允许我单击 div 并向我显示您在上面提供的所需页面的功能。然而;最重要的是，假设在“第 1 页”内，我希望在“第 1 页”下方有另一组执行相同功能的链接。如果您需要我澄清，请告诉我
@Chris 嗯，有点像子页面？我根本没有一个好的解决方案，但如果我理解正确的话，这样的事情可能会奏效：jsfiddle.net/fLamG是你的意思吗？