设置默认 div(CSS 过渡)

Question

我的目标是创建一个包含 3 个绝对定位、重叠的div 的页面。 一次只能看到 1 个div。 页面底部的 3 个按钮用于使用 CSS 过渡"选择"每个淡入/淡出的div。

我很接近，但我有一个小问题。

目前，初始化

时页面为空白，带有 3 个按钮。 我的问题是，如何在初始化时默认显示第一个div（id="#1"），而无需按下按钮。 我仍然希望div #1 遵循正常的淡入/淡出规则，初始化时除外。

.HTML：

<div id="1" class="inner">One</div>
<div id="2" class="inner">Two</div>
<div id="3" class="inner">Three</div>
<a href="#1" class="button">Toggle One</a>
<a href="#2" class="button">Toggle Two</a>
<a href="#2" class="button">Toggle Three</a>

一些 CSS：

.inner{
    position:absolute;
    visibility:hidden;
    opacity:0;
    transition:visibility 0s linear .5s, opacity .5s linear;
}
.inner:target{
    visibility:visible;
    opacity:1;
    transition-delay:0s;
}

我更喜欢不使用javascript/jQuery的解决方案，但如果有必要，我不反对它。

Answer 1

很可能你至少需要使用JavaScript/jQuery来设置加载时#1div的可见性。 你可以通过以下方式使用 CSS 来做到这一点：

.inner:first-of-type {
    visibility: visible;
    opacity: 1;
}

http://jsfiddle.net/74qYY/

那里的限制是需要一个背景来掩盖其他div。 如果你不能忍受，你可以随时使用 JS： http://jsfiddle.net/74qYY/1/

Answer 2

对于那些感兴趣的人，我找到了一种在不需要背景的情况下保留 CSS 过渡的迂回方法。 具体来说，我使用了按钮设置的网址片段。

在问题中，我希望div"#1"显示为默认值。 另一种看待这个问题的方法是，我希望 GET 请求"/"重定向到"/#1"。

我使用了一些jQuery来检查URL片段的缺失，然后重定向到 www.url.com/#1，这反过来又触发了CSS过渡。