使用JQuery进行页面导航

Question

我正在开发一个网络应用。此Web应用程序有4个选项卡。当用户点击标签时，我希望内容与此网站类似地滑动：http://carrotcreative.com。

是否有推荐的jQuery插件来提供此功能？我似乎无法找到一个好的。

Answer 1

您可以使用简单的jquery代码执行此操作。您需要将所有页面放在2个div中，一个将使用animate移动，而外部的一个将用作遮罩，因此您将不会有滚动条

<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; }

然后使用animate

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

这应该可以，但我没有测试它。