堆叠虚拟纸张并通过CSS重新排列它们

我试图将纸张作为一种真实的隐喻。我希望那些整齐堆放在彼此之上的纸张，只显示每个覆盖纸张的标题并覆盖其余（内容）。如下图所示：堆叠虚拟纸张并通过CSS重新排列它们

 
!-------------- 
| 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）如果我理解你想要什么

来源

2011-08-30 MerlinDE

，这正是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 
});

根据其原生高度大小的内容设置。

来源

2011-08-30 22:12:32

堆叠虚拟纸张并通过CSS重新排列它们

回答

相关问题