Html 一个html页面中的多个页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19289105/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple pages in one html page
提问by Chris
Looking to be able to put multiple distinct pages into one html page similar to the code shown below that was posted in this post: Multiple distinct pages in one HTML file
希望能够将多个不同的页面放入一个 html 页面，类似于这篇文章中发布的如下所示的代码： 多个不同的页面在一个 HTML 文件中
However, I would like to have a fixed header above the pages to allow for navigation.
For example, the header has 4 links (Link1,Link2,etc.) that a user can choose from. If a user where to click on "Link2", then only Link2 will appear beneath and the other pages will remain hidden.
但是，我希望在页面上方有一个固定的标题以允许导航。
例如，标题有 4 个链接（Link1、Link2 等）可供用户选择。如果用户点击“Link2”，则只有Link2 会出现在下方，而其他页面将保持隐藏。
Let me know, Thanks!
让我知道，谢谢！
<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>
回答by Nenotlep
You could play with the IDs only, but if you get many pages that starts to get a little tedious. I suggest using a class to do the hiding. Also, if you want there to be a common header for the pages, you just need to build it from HTML elements and then display the page links there and not within the page content.
您可以只使用 ID，但是如果您获得很多页面，就会开始变得有点乏味。我建议使用一个类来进行隐藏。此外，如果您希望页面有一个公共标题，您只需要从 HTML 元素构建它，然后在那里而不是在页面内容中显示页面链接。
I made an alternative suggestion where I added a 'page' class to all the page DIVs. Then what you can do is hide all the DIVs with the "page" class and show the one you want with an ID. This too is not a very flexible system, you can't easily do a dynamic amount of pages or a dynamic first page but it is a place to start. Here's my example:
我提出了一个替代建议，我向所有页面 DIV 添加了一个“页面”类。然后你可以做的是用“页面”类隐藏所有的 DIV，并用一个 ID 显示你想要的那个。这也不是一个非常灵活的系统，您不能轻松地制作动态数量的页面或动态的第一页，但它是一个起点。这是我的例子：
This is in JSFiddle http://jsfiddle.net/H4dbJ/but here's the code directly:
这是在 JSFiddle http://jsfiddle.net/H4dbJ/但这里的代码直接：
<html>
<head>
<style type='text/css'>
span {
text-decoration:underline;
color:blue;
cursor:pointer;
}
</style>
<script>
// show the given page, hide the rest
function show(elementID) {
// try to find the requested page and alert if it's not found
var ele = document.getElementById(elementID);
if (!ele) {
alert("no such element");
return;
}
// get all pages, loop through them and hide them
var pages = document.getElementsByClassName('page');
for(var i = 0; i < pages.length; i++) {
pages[i].style.display = 'none';
}
// then show the requested page
ele.style.display = 'block';
}
</script>
</head>
<body>
<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>
</body>
</html>
Further development ideas include: a next/prev button that uses Page1 Page2...PageN the page number as a variable, loops through all the pages an shows the last one. Or shows the first one. After that, a Next/Previous button that keeps track of the current page in a variable and then goes to the next one.
进一步的开发思路包括：下一页/上一页按钮，使用 Page1 Page2...PageN 页码作为变量，循环所有页面并显示最后一页。或者显示第一个。之后，下一个/上一个按钮在变量中跟踪当前页面，然后转到下一个。
