2

4 つのボタン メニュー バーを持つ Web ページがあります。ボタンをクリックするたびに、異なる div が表示されます。4 つの div はすべて同じページに含まれています (index.html 以外の 2 ページ目は使用しません)。
http://livedemo00.template-help.com/wt_39361/index.html#!/page_aboutと同じように、これらの div 間の変更を行いたいと考えて
います。私のやり方は：任意のdivへの絶対位置と適用

$('#content1').animate({ "left": "+=1500px" }, "slow" );

ただし、 content1 が右に移動するため、結果は私が望むものではありませんが、水平スクロールバーでまだ表示されています。#content1 を非表示にし、同時に #content2 を希望どおりに表示するにはどうすればよいですか?
ありがとうございました

4

1 に答える 1

1

基本的に、ビューポートが必要です。ビューポートにはoverflow: hidden;プロパティがあり、画面の幅になります。ビューポートは間違いなくbody要素である可能性がありますが、そうである必要はありません。唯一の条件は、移動する要素がその中に含まれていることです。

移動関数を起動すると、要素が画面の端に移動し、同じ方法で他の要素を取り込みposition: relative;、アニメーションの後に設定します。このようなもの：

var navClick = function() {
    $viewport = $('#viewport');
    $targetElem = $('#content' + $(this).data('target'));
    $active = $viewport.find('.active');
    $active.animate({'left': '-' + $active.width() + 'px'}, function() {
        $(this).removeClass('active');
    });
    $targetElem.animate({'left': '100px'}, function() {
        $(this).addClass('active');
    });
};

$(function() {
   $('nav span').on('click', navClick); 
});

チェックしてください:フィドル

于 2013-09-18T21:37:03.020 に答える