在不重新加载页面的情况下切换正文文本的想法,就是我们常说的“单页应用”,这是一个相当时髦的东西,它有很多好处,也有一些缺点或挑战。它通常使用 JavaScript 实现,通常使用库或框架,因为这就是我们处理网页编程的方式。
但是,仅使用 HTML 和 CSS 就可以实现单页应用程序的基本功能。此功能意味着该页面具有整个站点的内容,并且只有其中一部分是可见的。您将使用:target
,它指的是作为最近链接目标的元素。(:active
伪类是非常不同的东西:它指的是一个链接或等价物,当它被激活时,通常是通过点击它,在它实际被关注之前——通常是很短的时间。)
最小的例子:
<!doctype html>
<meta charset=utf-8>
<style>
.section { display: none }
.section:target { display: block }
</style>
<div class="nav-bar">
<ul class="nav">
<li><a href=#About>About</a></li>
<li><a href=#Contact>Contact</a></li>
<li><a href=#Other>Other</a></li>
</ul>
</div>
<div id=About class=section>
About us
</div>
<div id=Contact class=section>
Contact us
</div>
<div id=Other class=section>
Other stuff
</div>
这在例如 IE 8 和更早版本(不支持:target
)上不起作用,这就是为什么这是一种相当理论化的方法的原因之一。