如何在頁面之間進行轉換

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