问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

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

 Page 1 : click here for page 2

和

Page 2 : click here for page 1

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

原文由 paperjam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译html
阅读 1.1k
2 个回答
得票最新
社区维基
1
✓ 已被采纳

好吧，您 _可以_，但您可能只想在同一页面中拥有两组内容，并在它们之间切换。例子：

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

（简化的 HTML 代码，当然应该有 doctype 等）

原文由 Guffa 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

我对同样的问题使用了以下技巧。好处是它不需要任何 javascript。

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:

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

请参阅 JSFiddle 。

附加优势：随着您的网址发生变化，您可以使用它链接到特定页面。这是方法不会让你做的事情。

希望这可以帮助！

原文由 Binz Nakama 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题