jquery - JQuery を使用したページ ナビゲーション

Question

私はウェブアプリに取り組んでいます。この Web アプリには 4 つのタブがあります。ユーザーがタブをクリックすると、このサイトのようにコンテンツがスライドインするようにします: http://carrotcreative.com。

この機能を提供するために推奨される jQuery プラグインはありますか? なかなかいいのが見つからない。

Answer 1

これは、単純な jquery コードを使用して行うことができます。animate を使用して移動する 2 つの div にすべてのページを配置する必要があり、外側のページはマスクとして使用されるため、スクロールバーはありません

<ul id="nav">
  <li>page1</li>
  <li>page2</li>
</ul>


<div class="mask">
  <div class="container">
    <div class="page">
    </div>
    <div class="page">
    </div>
  </div>
</div>

.mask { overflow: hidden; }
.page { float: left; }

そして、アニメーションを使用して

$container = $('.container');
$pages = $container.find('.page');
$('#nav li').each(function(i) {
  $(this).click(function() {
     $container.stop().animate('margin-left', -$pages.eq(i).offest().left);
  });
});

これはうまくいくはずですが、私はそれをテストしませんでした。