如何在页面之间进行转换

Question

有人可以帮我，看看这个website，并告诉我，请点击某些菜单栏时，用于漂亮转换的功能，它可以顺利地转到另一个菜单栏无需加载白屏。

如果你知道，告诉我，它是什么或我该如何做，甚至是两者：D请给我下面的答案。谢谢很多。

Answer 1

如果您查看页面的源代码，您会看到所有的needen页面已经加载到DOM中。 （我猜可能是一页结构，或者可能是Asychronoumus加载）。

但是，所有页面都有自己的DIV容器，这些容器链接到导航栏。 点击每个导航元素，进行优先DIV的转换。

您可以选择淡入淡出效果（在您向我们展示的页面上使用该淡入淡出效果），甚至还可以选择一些其他酷炫效果，或者即使您知道如何使用jQuery来处理CSS，那么您自己的动画/转场太。以下是jQuery API fadeIn和fadeOut 的链接。

我会做这样的：

$(function(){ 
 
    // Setup your Variables first 
 
    var nav = $('.navigation ul li'); 
 
    var all_pages = $('.pages .page'); 
 
    var active = 'active'; 
 
    var target, page; 
 
    
 
    
 
    // On Click do the stuff to get some transition 
 
    nav.on('click', function(){ 
 
    // Get the Target 
 
    target = $(this).attr('data-target'); 
 
    page = $('.page[data-page='+target+']'); 
 
    
 
    // Hide all pages here (maybe it would be a better idea to target .page.active) 
 
    all_pages.fadeOut('slow').removeClass(active); 
 

 
    // FadeIn the target Page 
 
    page.fadeIn('slow').addClass(active); 
 
    
 
    }); 
 
    
 
    
 
    // fallback to first page when the target is not set on page load 
 
    if(!target)  nav.first().trigger('click'); 
 
});

.main { position:relative; width:100%; height:100%; font-family:'Verdana'; font-size:13px; } 
 

 
.navigation { border:0px solid red; width:150px; position:absolute; left:0px; top:0px; bottom:0px; } 
 
.navigation ul { list-style:none; width:auto; margin:0px; padding:0px; } 
 
.navigation ul li { display:block; height:30px; border:0px solid green; line-height:30px; white-space:nowrap; cursor:pointer; padding:0px 20px; } 
 

 
.pages { position:absolute; left:150px; right:0px; top:0px; bottom:0px; border:0px solid blue; } 
 
.page { position:absolute; top:0px; left:0px; right:0px; bottom:0px; display:none; min-height:500px; } 
 

 
.page.active { } 
 

 
.page:nth-child(1), 
 
.navigation ul li:nth-child(1) { background:lightgreen; } 
 
.page:nth-child(2), 
 
.navigation ul li:nth-child(2) { background:maroon; } 
 
.page:nth-child(3), 
 
.navigation ul li:nth-child(3) { background:wheat; } 
 
.page:nth-child(4), 
 
.navigation ul li:nth-child(4) { background:cyan; } 
 
.page:nth-child(5), 
 
.navigation ul li:nth-child(5) { background:salmon; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 

 
<div class='main'> 
 
    <div class='navigation'> 
 
    <ul> 
 
    <li data-target='1'>First Link</li> 
 
    <li data-target='2'>Second Page</li> 
 
    <li data-target='who'>Who I am</li> 
 
    <li data-target='location'>Location</li> 
 
    <li data-target='5'>Oter Stuff</li> 
 
    </ul> 
 
    </div> 
 
    
 
    <div class='pages'> 
 
    <div class='page' data-page='1'> Here is the first page ... </div> 
 
    <div class='page' data-page='2'> here is the seocnd one</div> 
 
    <div class='page' data-page='who'> Who I am?</div> 
 
    <div class='page' data-page='location'> Location </div>  
 
    <div class='page' data-page='5'> Oter Stuff </div> 
 
    </div> 
 
</div>

我希望你得到的代码背后的想法得到你想要的:) 顺便说一句，结果，我做了这个迅速HTML标记以获得类似的转换效果。 您需要为导航添加更多的动画素材以获得“在鼠标上滑动名称等”的东西 - 可以轻松完成：CSS的悬停语法。

希望这会有所帮助，ps。这是我的第一篇文章，我可能在那里有一些错误。 是的，应该有一个更好的HTML Buildup作为我的代码片段现在。

问候 Gkiokan