加载默认幻灯片的更简单的方法(使用css :target)

Question

我在寻找一种更优雅的方法来完成一些事情。

我在html页面上有5张幻灯片。每一张幻灯片都是一个带有某些内容的div，以及引用上一张和下一张幻灯片的back和next锚标记。幻灯片的位置通常是静态的，也就是说。没有特殊的定位，但我使用css动画淡出幻灯片。

下面是片段：

​

div.slide,
div.intro {
  max-width 200px;
  height: 200px;
  margin 1em auto;
  padding 1em;
  text-align left;
  background: yellow;
}

div.slide { display: none; }

div.slide:target ~ div.intro { display: none; }

div.intro:target,
div.slide:target {
  display: block;
  animation: slidein 1s forwards;
}

@keyframes slidein {
  0% { opacity: 0; display: block; }
  1% { opacity: 0; }
  100% { opacity: 1; }
}

div.intro a { margin-left: 2.35em; }

    <div class="slide" id="slide-2">
    <h1>Two</h1>
    <a href="#slide-1">Back</a>
    <a href="#slide-3">Next</a>
    </div>
    <div class="slide" id="slide-3">
    <h1>Three</h1>
    <a href="#slide-2">Back</a>
    <a href="#slide-4">Next</a>
    </div>
    <div class="slide" id="slide-4">
    <h1>Four</h1>
    <a href="#slide-3">Back</a>
    <a href="#slide-5">Next</a>
    </div>
    <div class="slide" id="slide-5">
    <h1>Five</h1>
    <a href="#slide-4">Back</a>
    </div>
    <div class="intro" id="slide-1">
    <h1>One</h1>
    <a href="#slide-2">Next</a>
    </div>

​

您应该能够单击“下一步”和“返回”，并在所有幻灯片中导航，而不会显示任何干扰淡出不透明度的操作，但重要的是，显示“无”将页的高度保持到当前幻灯片的高度。

一开始，所有的幻灯片都是一样的，但是有一个URL问题。如果页面在URL中没有#幻灯片-1加载，它就会崩溃。我需要的URL加载介绍幻灯片，即使没有#幻灯片-1，以及它。CSS实现了这一点，但必须使用普通的同级选择器，并将介绍幻灯片放在HTML中，这很糟糕。

是否有一种方法可以完成相同的事情而不扰乱HTML中的顺序。

1. 我想要首先在HTML中的介绍幻灯片。
2. 我想要介绍幻灯片显示，即使URL没有#幻灯片-1在末尾，如果它有。
3. 无JavaScript；)

想法？

Answer 1

我得到了一个纯CSS的答案，它满足了你所有的标准。

• 在HTML中，将id移到幻灯片内容的上方。
• 默认情况下继续隐藏所有幻灯片
• 默认情况下，intro-slide设置为display: block。
• 如果有任何目标，请隐藏intro-slide
• 使用更具体的方法重写前一个项目点的规则：

#slide-1:target~.slide-1

完整代码：

​

.slide {
  max-width: 200px;
  height: 200px;
  margin: 1em auto;
  padding: 1em;
  text-align: left;
  background: yellow;
  display: none;
}

:target~.intro-slide {
  display: none;
}

.intro-slide,
#slide-1:target~.slide-1,
#slide-2:target~.slide-2,
#slide-3:target~.slide-3,
#slide-4:target~.slide-4,
#slide-5:target~.slide-5 {
  display: block;
  animation: slidein 1s forwards;
}

@keyframes slidein {
  0% {
    opacity: 0;
    display: block;
  }
  1% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

div.intro-slide a {
  margin-left: 2.35em;
}

<div id="slide-1"></div>
<div id="slide-2"></div>
<div id="slide-3"></div>
<div id="slide-4"></div>
<div id="slide-5"></div>

<div class="slide slide-1 intro-slide">
  <h1>One</h1>
  <a href="#slide-2">Next</a>
</div>
<div class="slide slide-2">
  <h1>Two</h1>
  <a href="#slide-1">Back</a>
  <a href="#slide-3">Next</a>
</div>
<div class="slide slide-3">
  <h1>Three</h1>
  <a href="#slide-2">Back</a>
  <a href="#slide-4">Next</a>
</div>
<div class="slide slide-4">
  <h1>Four</h1>
  <a href="#slide-3">Back</a>
  <a href="#slide-5">Next</a>
</div>
<div class="slide slide-5">
  <h1>Five</h1>
  <a href="#slide-4">Back</a>
</div>

​

jsFiddle