我正在尝试制作一个位于 div 底部的选项卡菜单,当单击选项卡链接时,它会向上滑动并显示其内容。
这是我到目前为止所得到的。我真的不明白为什么它会像现在这样
http://jsfiddle.net/5mVt8/11/
关键位:
#content {
position: relative;
width:500px;
height:400px;
overflow:hidden;
}
.page {
position: absolute;
left:0;
top:380px;
width:500px;
height:400px;
}
<div id="content">
<div class="page" id="one"><a href="#one">Click</a>Page 1</div>
<div class="page" id="two"><a href="#two">Click</a>Page 2</div>
<div class="page" id="three"><a href="#three">Click</a>Page 3</div>
</div>
完整代码在这里:http://jsfiddle.net/5mVt8/11/
这些是在相对 div 中有一个绝对定位的 div 并溢出的错误吗?谁能告诉我为什么这不起作用或我应该如何批准它?
最佳答案
从您的 html 中删除#one #two #three。
<div id="content">
<div class="page" id="one"><a href="#">Click</a>Page 1</div>
<div class="page" id="two"><a href="#">Click</a>Page 2</div>
<div class="page" id="three"><a href="#">Click</a>Page 3</div>
</div>
现在只需正确编写您的动画即可。
$('.page a').click(function(){
$(this).parent('.page').animate({top:0}).addClass('open');
});
编辑:我相信您可以找到一种更简洁的方式来编写您的 CSS。所有这些绝对值、定位和 z 索引。我会找到更好的方法来完成您想要的,但这就是我。
关于javascript - 溢出的div中的绝对div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14323911/