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デフォルトの動作を防ぐために、クリック イベント関数の最後に追加する必要があります。

また、 animate メソッドの構文も見逃しています。このようになるはずです

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

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

于 2013-01-14T18:14:01.537 に答える