一个 html 页面中的多个页面

Multiple pages in one html page

本文关键字：一个 html      更新时间：2023-09-26

希望能够将多个不同的页面放入一个html页面中，类似于本文中发布的下面显示的代码：一个 HTML 文件中有多个不同的页面

但是，我希望在页面上方有一个固定的标题以允许导航。
例如，标头有 4 个链接(链接 1、链接 2 等(，用户可以从中进行选择。如果用户在哪里点击"Link2"，那么下面只会出现Link2，其他页面将保持隐藏状态。

让我知道，谢谢！

function show(shown, hidden) {
  document.getElementById(shown).style.display='block';
  document.getElementById(hidden).style.display='none';
  return false;
}
<!DOCTYPE html>
<html>
  <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>

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

我提出了一个替代建议，即向所有页面 DIV 添加一个"页面"类。然后，您可以做的是使用"page"类隐藏所有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>

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

相关文章：