jquery - 使用 JQuery 进行页面导航

Question

我正在开发一个网络应用程序。这个网络应用程序有 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; }

然后使用动画

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

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