div溢出的绝对div

时间:2013-01-14 17:56:40

标签: javascript jquery html css

我正在尝试制作一个位于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?任何人都可以告诉我为什么这不起作用或我应该如何批准这个?

2 个答案:

答案 0 :(得分:3)

从你的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');
 });

http://jsfiddle.net/5mVt8/18/

编辑:我相信你能找到一种更清晰的方式来编写你的CSS。所有那些绝对和定位和z索引。我会找到一种更好的方法来实现你想要的,但那就是我。

答案 1 :(得分:2)

您的#content固定高度为overflow:hidden,底部的页面部分隐藏此溢出。现在,在链接上单击锚点工作,#content 向下滚动到隐藏的块顶部。您应该在点击事件功能结束时添加return false以防止默认行为。

您还错过了animate method语法。它应该是这样的

$(this).parent().animate({'top': '0px'}, 300, "swing");

http://jsfiddle.net/5mVt8/27/