如何从导航栏中单击锚链接并在没有 javascript 的情况下更改 div 中的内容？答案

【问题标题】：How do you click on an anchor link from your nav bar and change the content in your div without javascript?如何从导航栏中单击锚链接并在没有 javascript 的情况下更改 div 中的内容？
【发布时间】：2025-12-17 07:30:01
【问题描述】：

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

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

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

【问题讨论】：

标签： html css

【解决方案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，这恰好是iframe 的name。目标与 iframe 名称匹配的任何链接都将在该 iframe 中打开。

【讨论】：

【解决方案2】：

另一种选择是使用 CSS :target。这个想法是你点击一个散列链接（如#about）并通过CSS显示HTML片段和对应的id，隐藏所有没有针对性的东西。

main>section {
  display: none;
}

:target {
  display: block;
}

<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
</nav>

<main>
  <section id="home">
    <h2>Welcome To My Homepage</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque veritatis obcaecati minima rerum doloribus expedita deleniti nesciunt voluptate quo, in, perferendis quibusdam sed quas quisquam recusandae adipisci, asperiores iure quod!</p>
  </section>

  <section id="about">
    <h2>My About Section</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque veritatis obcaecati minima rerum doloribus expedita deleniti nesciunt voluptate quo, in, perferendis quibusdam sed quas quisquam recusandae adipisci, asperiores iure quod!</p>
  </section>

  <section id="contact">
    <h2>My Contact Section</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque veritatis obcaecati minima rerum doloribus expedita deleniti nesciunt voluptate quo, in, perferendis quibusdam sed quas quisquam recusandae adipisci, asperiores iure quod!</p>
  </section>
</main>

jsFiddle

【讨论】：