0

我正在尝试制作一个位于 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 的错误吗？谁能告诉我为什么这不起作用或我应该如何批准这个？

4

2 回答 2

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 索引。我会找到一种更好的方法来完成你想要的，但这就是我。

于 2013-01-14T18:10:20.920 回答
2

您有 #content 固定高度，overflow:hidden底部的页面因溢出而部分隐藏。现在在链接点击锚点工作和#content向下滚动到隐藏块顶部。您应该return false在点击事件函数的末尾添加以防止默认行为。

你也错过了动画方法的语法。应该是这样的

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

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

于 2013-01-14T18:14:01.537 回答