堆疊虛擬紙張並通過CSS重新排列它們

Question

我試圖將紙張作爲一種真實的隱喻。 我希望那些整齊堆放在彼此之上的紙張，只顯示每個覆蓋紙張的標題並覆蓋其餘（內容）。如下圖所示：

 
!-------------- 
| Sheet 1 
+-------------- 
| Sheet 2 
+-------------- 
| Sheet 3 
| 
| 
| 

我也希望能夠「激活」任何給定的表，這意味着所有其他的表應該向下移動，露出活動工作表的內容。

像如下所示：

 
!-------------- 
| Sheet 1 
+-------------- 
| Sheet 2 
| 
| Sheet 2 content 
| goes here 
| this sheet is 
| 'active' 
| 
+-------------- 
| Sheet 3 
| 
| 
| 

對於這一點，我已經嘗試設置與負頂邊距一些DIV容器（這對於只有固定高度的DIV效果很好）。我還創建了一些.active類以附加到活動工作表的DIV以顯示它的內容。

我的CSS：

 

    .sheet { 
     position: relative; 
     width: 650px; 
     height: 550px;  
     margin: -465px auto 0 auto; 
    } 


    .sheet .active + .sheet { 
     margin: 0 auto 0 auto; 
    } 

正如你可能會立即看到，這隻適用於固定高度。 我正在尋找一種解決方案，也可以爲工作表使用可變高度。

任何想法？

（順便說一句：沒有必要支持蹩腳的瀏覽器，如IE < 9）如果我理解你想要什麼

Answer 1

，這正是jQuery UI accordion做什麼。

您可以使用此標記

<div id="sheets"> 
    <h3><a href="#sheet1">Sheet 1</a></h3> 
     <div> 
     Content for sheet 1 goes here 
     </div> 
     <h3><a href="#sheet2">Sheet 2</a></h3> 
     <div> 
     Content for sheet 2 goes here 
     </div> 
     <h3><a href="#sheet3">Sheet 3</a></h3> 
     <div> 
     Content for sheet 3 goes here 
     </div> 
</div> 

這jQuery的

$("#sheets").accordion({ 
    autoHeight: false 
}); 

根據其原生高度大小的內容設置。