使用JQuery進行頁面導航

Question

我正在開發一個web應用程序。這個網絡應用程序有4個標籤。當用戶點擊一個標籤時，我想讓內容滑動到與此網站類似的位置：http://carrotcreative.com。

是否有推薦的jQuery插件提供此功能？我似乎無法找到一個好的。

Answer 1

你可以使用簡單的jquery代碼來做到這一點。你需要把所有頁面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); 
    }); 
}); 

這應該工作但我沒有測試它。