没有 javascript 的 HTML/CSS 幻灯片

Question

首先，我想说这是一个关于我大学元素的问题，所以我更多地是在寻找指导而不是直接的答案。非常感谢任何指向我正确学习方向的链接。

我正在尝试仅使用 CSS/Html 创建幻灯片，而不使用 javascript。要求是:

• 没有 Javscript。
• 转换将在 URL 哈希 (#foo) 更改时触发(它指向幻灯片的 ID。
• 每张幻灯片都有一个唯一的预定义 ID。

我发现了很多不使用 javascript 的幻灯片示例，但它们中的每一个都使用链接来实现这一点。所以这里的问题是:

如何使用 ID 实现这一目标？有什么方法可以使用其 id 显示/隐藏元素？

注意: 我知道 SO 的规则不鼓励发布链接而不是答案，但在这种情况下，我想知道是否有任何资源可供学习!谢谢!

Answer 1

我想很好，使用:target 伪元素，你可以实现你想做的事情。有一个包含隐藏内容的幻灯片列表，并且基于 :target，如果我们显示它，它就会起作用。这就是我到目前为止的想法。

我不确定如何在不使用链接的情况下实现它，但这只是为了左右移动，但这使用了 :target、CSS 而没有 JavaScript。

section {background-color: #ccf; border: 5px solid #99f; display: none; line-height: 500px; width: 500px; margin: 15px auto; text-align: center;}
section:target {display: block;}

#nav,
#nav li {display: block; margin: 0; padding: 0; list-style: none; text-align: center;}
#nav li {display: inline-block;}
#nav li a {display: block; text-decoration: none; padding: 3px; margin: 5px; border: 1px solid #99f; border-radius: 5px;}
#nav li a:focus,
#nav li a:active {background-color: #ccf; color: #fff;}

<ul id="nav">
  <li><a href="#slide-1">Slide 1</a></li>
  <li><a href="#slide-2">Slide 2</a></li>
  <li><a href="#slide-3">Slide 3</a></li>
  <li><a href="#slide-4">Slide 4</a></li>
  <li><a href="#slide-5">Slide 5</a></li>
</ul>
<div id="slides">
  <section id="slide-1">This is Slide 1</section>
  <section id="slide-2">This is Slide 2</section>
  <section id="slide-3">This is Slide 3</section>
  <section id="slide-4">This is Slide 4</section>
  <section id="slide-5">This is Slide 5</section>
</div>

使用全屏预览来查看它的外观。