与现有的导航主要内容滑块建议

Question

我想在现有的HTML页面上制作一个内容滑块。 基本上，当用户点击导航链接时，内容将“滑出”当前页面并“滑入”相应的页面。

我以前使用滑块，但没有绑定到已经存在的导航栏。

有什么建议吗？

我的HTML结构是这样的：

<div id="wrapper"> 
    <ul class="nav"> 
    <li class="navlink">item</li> 
    <li class="navlink">item</li> 
    <li class="navlink">item</li> 
    <li class="navlink">item</li> 
    </ul> 
    <div class="content"> 
    content 
    </div> 
</div> 

什么建议吗？

Answer 1

你可以看看这个，做了一个非常简单的脚本。

工作实例： http://jsfiddle.net/9rde7/6/

HTML：

<div id="wrapper"> 
    <ul class="nav"> 
    <li class="navlink" page="page1">item</li> 
    <li class="navlink" page="page2">item</li> 
    <li class="navlink" page="page3">item</li> 
    </ul> 
    <div class="content"> 
    <div class="content-page active" id="page1">Content 1</div> 
    <div class="content-page" id="page2" style="background:#666">Content 2</div> 
    <div class="content-page" id="page3">Content 3</div> 
    </div> 
</div>​​​​​​ 

CSS：

.content{ 
    background:#efefef; 
    position:relative; 
    width:99%; 
    height:500px; 
    margin:0 auto; 
    overflow:hidden; 
} 

.content-page{ 
    background:#dddddd; 
    position:absolute; 
    width:100%; 
    height:100%; 
    left:100%; 
} 

.content-page.active{ 
    left:0; 
} 

的Javascript：

$('.nav li').bind('click', function(){ 
    $page = $('#'+$(this).attr("page")); 
    if($page.hasClass("active")) return; 

    $('.content-page.active').animate({left:"100%"},200); 
    $('.content-page').removeClass("active"); 
    $page.animate({left:"0"},200, function(){$page.addClass("active");}); 
}); 

Answer 2

你的意思是“页面转换”？有很多不同的方式来做到这一点，包括this previous SO post或this fading one。