HTML/CSS 没有 javascript 的幻灯片

Question

首先我想说这是一个关于我大学项目的问题所以我更多的是寻找指导而不是直接的答案。任何指向我正确学习方向的链接都将不胜感激。

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

没有 Javscript。
当 URL 散列 (#foo) 更改（它指向幻灯片的 ID。
每张幻灯片都有一个唯一的预定义 ID。

我找到了很多没有 javascript 的幻灯片示例，但每个示例都使用链接来实现。所以这里的问题是：

如何使用 ID 实现这一点？有什么方法可以 show/hide 元素使用他们的 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>

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

HTML/CSS 没有 javascript 的幻灯片

HTML/CSS slideshow without javascript

html

css

slideshow