单个 HTML 文件中的整个网站

我总是忍不住想到 这个网站。 它看起来像一个非常标准的网站； 带有指向不同页面链接的网站。 除了… 整个网站都包含在一个 HTML 文件中，别无他法。

您可能会问，点击导航链接会怎样？ 每个链接只是显示和隐藏 HTML 的某些部分。

<section id="home">
  <!-- home content goes here -->
</section>
<section id="about">
  <!-- about page goes here -->
</section>

每个 <section> 都通过 CSS 隐藏

section { display: none; }

主导航中的每个链接都指向页面上的一个锚点

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

而且，一旦您点击一个链接，该特定链接的 <section> 会通过以下方式显示

section:target { display: block; }

看到那个 :target 伪选择器了吗？ 这就是魔法！ 当然，它已经存在很多年了，但这绝对是一种巧妙的使用方式。 大多数情况下，它用于在点击指向它的锚链接后突出显示页面上的锚点。 这是一种帮助用户了解他们刚刚跳转到哪里方便的方式。

无论如何，像这样使用 :target 非常聪明！ 当您四处点击时，它最终看起来就像一个普通的网站。

直接链接 →