在同一（一个）容器 html 页面内切换 html 页面

Question

好吧，假设我只有一个 HTML 页。称之为 index.htm 这是容器页面。（容器页面还有别的花哨的名字吗？）

我在这个页面的顶部有 3 个按钮。按钮 A、B 和 C

如果单击按钮 A，我想在同一个 index.htm 页面内显示名为 fileX.htm 的 HTML 页面，就在它的正下方。但是如果我点击按钮 B，我想用文件 fileY.htm 替换 fileX.htm（在显示 fileX.htm 的同一区域）。然后，如果我单击按钮 C，我想将 fileY.htm 替换为 fileZ.htm。然后我点击按钮 B，filey.htm 必须替换 fileZ.htm 等等。

我知道如何使用 iFrame 执行此操作。我还看到使用制表符和 CSS 文件完成此操作。两者看起来都很乱。

我知道如何使用嵌入 tag.But 只显示一个文件 fileX.htm 问题是从 filex.htm 切换到 fileY.htm 等。是否可以使用嵌入或其他一些简单的方式（例如更改的 href 标签或其他方式）来做到这一点？

谢谢

Answer 1

您可以在使用 Javascript

单击按钮时更改 embed 的 src 属性

编辑：工作示例

index.html

<embed type="text/html" src="test1.html" width="500" height="300" id="embed" />

<button id="test1">Test1</button>
<button id="test2">Test2</button>

<script>
  const test1 = document.getElementById("test1");
  const test2 = document.getElementById("test2");
  const embed = document.getElementById("embed");

  test1.addEventListener("click", (e) => {
    embed.src = "test1.html";
  });

  test2.addEventListener("click", (e) => {
    embed.src = "test2.html";
  });
</script>

test1.html

<h1>test1</h1>

test2.html

<h1>test2</h1>

您可以对对象和 iframe AFAIK 执行相同的操作。

在同一（一个）容器 html 页面内切换 html 页面

Switching html pages inside the same (one) container html page

iframe

href

embed