一个 HTML 文件中的多个不同页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8211128/
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 distinct pages in one HTML file
提问by paperjam
Is there any way to have multiple distinct HTML pages contained within a single HTML file? For example, suppose I have a website with two pages:
有没有办法在一个 HTML 文件中包含多个不同的 HTML 页面？例如，假设我有一个包含两个页面的网站：
Page 1 : click here for page 2
and
和
Page 2 : click here for page 1
Can I create a single HTML file that embeds simple static HTML for both pages but only displays one at a time? My actual pages are of course more complicated with images, tables and javascript to expand table rows. I would prefer to avoid too much script code. Thanks!
我可以创建一个 HTML 文件，为两个页面嵌入简单的静态 HTML 但一次只显示一个吗？我的实际页面当然更复杂，包含图像、表格和 javascript 以扩展表格行。我宁愿避免太多的脚本代码。谢谢！
回答by Guffa
Well, you could, but you probably just want to have two sets of content in the same page, and switch between them. Example:
嗯，您可以，但您可能只想在同一页面中包含两组内容，并在它们之间切换。例子：
<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>
(Simplififed HTML code, should of course have doctype, etc.)
（简化的 HTML 代码，当然应该有 doctype 等）
回答by Ashwin Krishnamurthy
Have you considered iframesor segregating your content and using a simple show/hide?
您是否考虑过iframe或隔离您的内容并使用简单的显示/隐藏？
EditIf you want to use an iframe, you can have the contents of page1 and page2 in one html file. Then you can decide what to show or hide by reading the location.searchproperty of the iframe. So your code can be like this :
编辑如果要使用 iframe，可以将 page1 和 page2 的内容放在一个 html 文件中。然后你可以通过阅读location.searchiframe的属性来决定显示或隐藏什么。所以你的代码可以是这样的：
For Page 1 : iframe.src = "mypage.html?show=1"
对于第 1 页： iframe.src = "mypage.html?show=1"
For Page 2 : iframe.src = "mypage.html?show=2"
对于第 2 页： iframe.src = "mypage.html?show=2"
Now, when your iframe loads, you can use the location.search.split("=")[1], to get the value of the page number and show the contents accordingly. This is just to show that iframes can also be used but the usage is more complexthan the normal show/hide using div structures.
现在，当您的 iframe 加载时，您可以使用location.search.split("=")[1], 来获取页码的值并相应地显示内容。这只是为了表明也可以使用 iframe，但其用法比使用 div 结构的正常显示/隐藏更复杂。
回答by topherg
have all the pages in distinct div areas
将所有页面放在不同的 div 区域中
<div style="" id="page1">
First Page Contents
</div>
<div style="display:none" id="page2">
Second Page Contents
</div>
then use a js script to workout what you are viewing (like within an hashtag style) to navigate. Either that, or ajax to get the response from a specific file (like /pages/page1.html)
然后使用 js 脚本来锻炼您正在查看的内容（例如在主题标签样式中）以进行导航。要么，要么 ajax 从特定文件（如/pages/page1.html）获取响应
var $prehashval = "";
function loop()
{
if (location.hash.slice(1)!=$prehashval)
hashChanged();
$prehashval = location.hash.slice(1);
setTimeout("loop()", 100);
}
function hashChanged()
{
var $output;
switch (location.hash.slice(1))
{
case "page1":
document.getElementById('page1').style.display = "";
document.getElementById('page2').style.display = "none";
break;
case "page2":
document.getElementById('page1').style.display = "none";
document.getElementById('page2').style.display = "";
break;
default:
$output = location.hash.slice(1);
}
}
loop();
回答by Dinesh P.R.
回答by rocketserver
You could use Colker, which is built for this, but you'll have to remove the search box, and search feature code, because searching isn't compatible with the type of content you intend to use.
您可以使用为此而构建的Colker，但您必须删除搜索框和搜索功能代码，因为搜索与您打算使用的内容类型不兼容。
Page contents are stored in a java-script array, and the "page" (eg: ?page=pagename) URL parameter determines which page content to serve.
页面内容存储在 中java-script array，“ page”（例如：？page=pagename）URL 参数确定要提供的页面内容。
回答by Binz Nakama
I used the following trick for the same problem. The good thing is it doesn't require any javascript.
我对同样的问题使用了以下技巧。好消息是它不需要任何 javascript。
CSS:
CSS：
.body {
margin: 0em;
}
.page {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: -100vw;
overflow-y: auto;
z-index: 0;
background-color: hsl(0,0%,100%);
}
.page:target {
left: 0vw;
z-index: 1;
}
HTML:
HTML：
<ul>
<li>Click <a href="#one">here</a> for page 1</li>
<li>Click <a href="#two">here</a> for page 2</li>
</ul>
<div class="page" id="one">
Content of page 1 goes here.
<ul>
<li><a href="#">Back</a></li>
<li><a href="#two">Page 2</a></li>
</ul>
</div>
<div class="page" id="two">
Content of page 2 goes here.
<ul style="margin-bottom: 100vh;">
<li><a href="#">Back</a></li>
<li><a href="#one">Page 1</a></li>
</ul>
</div>
See a JSFiddle.
请参阅JSFiddle。
Added advantage: as your url changes along, you can use it to link to specific pages. This is something the method won't let you do.
附加优势：随着您的 url 发生变化，您可以使用它来链接到特定页面。这是该方法不会让您做的事情。
Hope this helps!
希望这可以帮助！
回答by negas
Twineis an open-source tool for telling interactive, nonlinear stories. It generates a single html with multiples pages. Maybe it is not the right tool for you but it could be useful for someone else looking for something similar.
Twine是一种用于讲述交互式非线性故事的开源工具。它生成具有多个页面的单个 html。也许它不是适合您的工具，但它可能对寻找类似工具的其他人有用。
回答by Sean McDonald
going along with @binz-nakama, here's an update on his jsfiddle with a very small amount of javascript. also incoporates this very good article on css navigation
与@binz-nakama 一起，这里有一个关于他的 jsfiddle 的更新，其中包含很少量的 javascript。还包含了这篇关于 css 导航的非常好的文章
Array.from(document.querySelectorAll("a"))
.map(x => x.addEventListener("click",
function(e){
Array.from(document.querySelectorAll("a"))
.map(x => x.classList.remove("active"));
e.target.classList.add("active");
}
));
回答by Alpha_Pi
Let's say you have multiple pages, with id #page1#page2and #page3. #page1is the ID of your start page. The first thing you want to do is to redirect to your start page each time the webpage is loading. You do this with javascript:
假设您有多个页面，带有 id#page1#page2和#page3. #page1是起始页的 ID。您要做的第一件事是在每次加载网页时重定向到您的起始页。您可以使用 javascript 执行此操作：
document.location.hash = "#page1";
Then the next thing you want to do is place some links in your document to the different pages, like for example:
然后您要做的下一件事是在您的文档中放置一些指向不同页面的链接，例如：
<a href="#page2">Click here to get to page 2.</a>
Then, lastly, you'd want to make sure that only the active page, or target-page is visible, and all other pages stay hidden. You do this with the following declarations in the <style>element:
然后，最后，您要确保只有活动页面或目标页面可见，而所有其他页面保持隐藏状态。您可以使用<style>元素中的以下声明来执行此操作：
<style>
#page1 {display:none}
#page1:target {display:block}
#page2 {display:none}
#page2:target {display:block}
#page3 {display:none}
#page3:target {display:block}
</style>
回答by Reece Holmdahl
This is kind of overriding the thing of one page, but... You could use iframes in HTML.
这是一种覆盖一页的东西，但是...您可以在 HTML 中使用 iframe。
<html>
<body>
<iframe src="page1.html" border="0"></iframe>
</body>
</html>
And page1.html would be your base page. Your still making multiple pages, but your browser just doesn't move. So lets say thats your index.html. You have tabs, you click page 2, your url wont change, but the page will. All in iframes. The only thing different, is that you can view the frame source as well.
page1.html 将是您的基页。您仍在制作多个页面，但您的浏览器只是不动。所以让我们说那是你的 index.html。你有标签，你点击第 2 页，你的网址不会改变，但页面会。全部在 iframe 中。唯一不同的是，您也可以查看帧源。
