設置一個默認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轉換）

回答

相關問題