设置一个默认div（CSS转换）

我的目标是创建一个包含3个绝对定位的重叠div的页面。一次只能看到1个div。页面底部的3个按钮用于使用CSS转换以淡入/淡出来“选择”每个div。设置一个默认div（CSS转换）

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

目前，在初始化时，页面为空白，有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的一个解决方案，但我不反对它，如果必要的。

来源

2014-01-08 cjhin

ID是无效的，他们不能以数字 –

开头抱歉，我只是使用占位符。不知道那个整数ID是无效的，但是很高兴知道！ – cjhin

您很可能需要至少使用JavaScript/jQuery来设置#1 div在加载时的可见性。您可以通过使用CSS这样做：

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

http://jsfiddle.net/74qYY/

的限制有一个背景需要掩盖了其他的div。如果你不能忍受这种情况，你总是可以使用JS：http://jsfiddle.net/74qYY/1/

来源

2014-01-08 08:00:32

啊我明白了。有趣的是，我没有考虑使用“.inner”背景来掩盖默认值。绝对适合我的问题案例！不幸的是，可能不会外推到我试图解决的现实世界问题，但这就是我猜的javascript。谢谢！ – cjhin

对于那些有兴趣的人，我发现了一个循环的方式来保存CSS转换而不需要背景。具体来说，我使用按钮设置的URL片段。

在问题中，我想div“＃1”显示为默认值。另一种看待这个问题的方法是我想要一个“/”的GET请求重定向到“/＃1”。

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

来源

2014-01-08 09:05:14 cjhin

设置一个默认div（CSS转换）

回答

相关问题