一个HTML页面如何显示多个网页？

Question

一个HTML页面如何显示多个网页？

3

我想实现将多个不同的页面放入一个HTML页面中，类似于以下代码示例中在此帖子中发布的内容： Multiple distinct pages in one HTML file 然而，我想要在页面上方添加一个固定的标题，以便进行导航。
例如，标题有4个链接（Link1，Link2等），用户可以从中选择。如果用户单击“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>

- Chris

你缺少一些代码。在onclick中，你使用了一个叫做"dijit"的东西，它在哪里声明的，是什么？如果你把你的javascript分离到HTML body之外的某个地方，这将会更容易。 - Joel Peltonen

刚刚编辑了帖子并添加了新的代码片段，是否可以使用这段代码创建标题，或者还有其他方法可以实现？ - Chris

是的，这可能是可能的，但不是非常灵活。我下面举了一个例子，可能更实用。在那里，常见的“标题”只是读取“显示页面1,2,3。”，数字是可点击的。实际内容隐藏在与您的问题相同的DIV下方的标题中。 - Joel Peltonen

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Joel Peltonen · Accepted Answer

你可以只使用ID进行操作，但如果有很多页面，这会变得有点繁琐。我建议使用class来进行隐藏。此外，如果你想要在页面上有一个共同的页眉，你只需要从HTML元素中构建它，然后将页面链接显示在那里而不是页面内容中。

我提出了一种替代方案，其中我向所有页面DIV添加了“page”类。然后你可以隐藏所有带有“page”类的DIV，并显示你想要的ID。这也不是一个非常灵活的系统，你不能轻松地处理动态数量的页面或动态的第一页，但这是一个开始。这是我的例子：

这是在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 页码作为变量的下一页/上一页按钮，循环显示所有页面并显示最后一页或第一页。此外，还可以添加一个Next/Previous按钮，在变量中跟踪当前页面，然后转到下一页。