html - 如何在没有 javascript 的情况下单击导航栏中的 anchor 链接并更改 div 中的内容？

Question

我了解到，通常当您从导航栏中单击一个链接时，会打开另一个网页。

在我当前的个人元素中，我只想在单击导航栏中的链接后更改 div 内容，这意味着更改很小，而且我知道 DRY 规则的重要性，所以我在这里很困惑。

在这种情况下，如果我只想使用标准的 HTML、CSS 而不使用 javascript(类里面没有讲授)来实现这一点，唯一的选择是上传具有不同 div 内容的同一 HTML 文件的多个版本，并将它们与索引 HTML 文件中导航栏中的 anchor 链接是否正确？

Answer 1

您要找的是 inline frame , 或 <iframe> .这允许您设置一个可以显示上下文的区域，并且您可以将它直接链接到特定的框架。

例如:

<nav>
  <a href="https://example.com" target="main">Open in iframe</a>
</nav>

<iframe name="main" width="640" height="480"></iframe>

在此示例中，链接具有 target设置为 main ，恰好是 name的 iframe .目标与 iframe 名称匹配的任何链接都将在该 iframe 中打开。