一个HTML文件中有多个不同的页面_Html

一个HTML文件中有多个不同的页面

html

一个HTML文件中有多个不同的页面,html,Html,有没有办法在一个HTML文件中包含多个不同的HTML页面？例如，假设我有一个包含两个页面的网站： Page 1 : click here for page 2 及我可以创建一个HTML文件，为两个页面嵌入简单的静态HTML，但一次只显示一个吗？当然，我的实际页面更复杂，需要图像、表格和javascript来扩展表格行。我宁愿避免太多的脚本代码。谢谢从理论上讲，可以使用数据：方案URI和框架，但这离实际应用还有很长的路要走您可以通过使用JS隐藏某些内容，然后在单击某个内容时将其显示（以的样

有没有办法在一个HTML文件中包含多个不同的HTML页面？例如，假设我有一个包含两个页面的网站：

Page 1 : click here for page 2

及

我可以创建一个HTML文件，为两个页面嵌入简单的静态HTML，但一次只显示一个吗？当然，我的实际页面更复杂，需要图像、表格和javascript来扩展表格行。我宁愿避免太多的脚本代码。谢谢

从理论上讲，可以使用

数据：

方案URI和框架，但这离实际应用还有很长的路要走

您可以通过使用JS隐藏某些内容，然后在单击某个内容时将其显示（以的样式）来伪造它。

您是否考虑过或隔离您的内容并使用简单的显示/隐藏

编辑如果要使用iframe，可以将第1页和第2页的内容放在一个html文件中。然后，您可以通过读取iframe的

location.search

属性来决定显示或隐藏什么。因此，您的代码可以如下所示：

对于第1页：

iframe.src=“mypage.html？show=1”

对于第2页：

iframe.src=“mypage.html？show=2”

现在，当iframe加载时，您可以使用

location.search.split（“=”[1]

）获取页码的值并相应地显示内容。这只是为了表明iFrame也可以使用，但其用法比使用div结构的正常显示/隐藏更为复杂。

所有页面都位于不同的div区域

<div style="" id="page1">
First Page Contents
</div>

<div style="display:none" id="page2">
Second Page Contents
</div>

当然可以，但是你可能只想在同一个页面中有两组内容，并在它们之间切换。例如：


功能显示（显示、隐藏）{
document.getElementById（如图所示）.style.display='block'；
document.getElementById（隐藏）.style.display='none'；
返回false；
}
第1页内容
第2页内容

JQuery Mobile具有以下功能。但我不确定桌面Web应用程序。

这有点凌驾于一个页面之上，但是。。。可以在HTML中使用iFrame

<html>
<body>
<iframe src="page1.html" border="0"></iframe>
</body>
</html>

而page1.html将是您的基本页面。您的浏览器仍在创建多个页面，但浏览器无法移动。假设这就是你的index.html。你有标签，你点击第2页，你的url不会改变，但是页面会改变。都在iframes中。唯一不同的是，您还可以查看帧源。

解决方案1 一个解决方案是，不需要任何JavaScript，只需创建一个页面，其中多个页面只是由大量空白分隔的常规内容。它们可以包装到

div

容器中，内联样式表可以赋予它们空白：

<style>
.subpage { margin-bottom: 2048px; }
</style>
... main page ...

<div class="subpage">
<!-- first one is empty on purpose: just a place holder for margin;
     alternative is to use this for the main part of the page also! -->
</div>

<div class="subpage">
</div>

<div class="subpage">
</div>

在Firefox中，我得到一个“无聊”的超链接，它导航到一个显示FOO标题的页面。（请注意，我这里没有一个完整格式的HTML页面，只有一个HTML片段；它只是一个hello world示例）

这种技术的缺点是整个目标页面都在URL中，URL被塞进浏览器的地址输入框中

如果它很大，可能会遇到一些问题，可能是特定于浏览器的问题；我在这方面没有多少经验

另一个缺点是必须正确转义整个HTML，以便它可以显示为

href

属性的参数。显然，它不能在任何地方包含纯双引号字符

第三个缺点是，每个这样的链接都必须复制

数据：

材料，因为它在语义上根本不是链接，而是复制粘贴嵌入。如果要嵌入的页面很大，并且有很多链接，那么这不是一个有吸引力的解决方案。

您可以使用，它是为此而构建的，但是您必须删除搜索框和搜索功能代码，因为搜索与您打算使用的内容类型不兼容

页面内容存储在

java脚本数组中，“页面
”（例如：？Page=pagename
）URL参数确定要服务的页面内容。好的是它不需要任何javascript
CSS:
HTML:

点击进入第1页
点击第2页

第1页的内容在这里。




第2页的内容在这里。





见a
附加优势：随着url的变化，您可以使用它链接到特定页面。这是该方法不允许你做的事情
希望这有帮助
 与@binz-nakama一起，这里用少量javascript更新了他的JSFIDLE。这也与公司有关

假设您有多个页面，id分别为#page1
#page2
和#page3
#page1
是起始页的ID。您要做的第一件事是在每次加载网页时重定向到起始页。您可以使用javascript执行此操作：
document.location.hash = "#page1";

然后，您要做的下一件事是在文档中放置一些指向不同页面的链接，例如：
<a href="#page2">Click here to get to page 2.</a>



最后，您需要确保只有活动页面或目标页面可见，而所有其他页面保持隐藏状态。您可以通过
元素中的以下声明执行此操作：
<style>
#page1 {display:none}
#page1:target {display:block}
#page2 {display:none}
#page2:target {display:block}
#page3 {display:none}
#page3:target {display:block}
</style>


#第1页{显示：无}
#page1:目标{显示：块}
#第2页{显示：无}
#第2页：目标{显示：块}
#第3页{显示：无}
#第3页：目标{显示：块}
是一个用于讲述交互式非线性故事的开源工具。
它生成一个包含多个页面的html。
也许它不是适合你的工具，但它可能对你有用
.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;
}

<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>

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");    
  }
));

document.location.hash = "#page1";

<a href="#page2">Click here to get to page 2.</a>

<style>
#page1 {display:none}
#page1:target {display:block}
#page2 {display:none}
#page2:target {display:block}
#page3 {display:none}
#page3:target {display:block}
</style>