希望能够将多个不同的页面放入一个 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>最佳答案
您可以只使用 ID，但如果您获得许多页面，就会开始变得有点乏味。我建议使用类来隐藏。此外，如果您希望页面有一个通用的标题，您只需从 HTML 元素构建它，然后在此处而不是在页面内容中显示页面链接。
我提出了一个替代建议，我向所有页面 DIV 添加了一个“页面”类。然后你可以做的是用“页面”类隐藏所有的 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 页码作为变量的下一页/上一页按钮，循环遍历所有页面并显示最后一页。或显示第一个。之后，下一页/上一页按钮在变量中跟踪当前页面，然后转到下一页。
关于javascript - 一个html页面中的多个页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19289105/