Question

有人可以帮助我，看看这个website，请告诉我，当你点击一些菜单栏时它会用于很好的过渡，它会顺利进入另一个页面而不加载whitescreen。

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

Answer 1

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

但是所有页面都有自己的DIV容器，它们链接到导航栏。单击每个导航元素，进行首选DIV的转换。

你可以选择淡入淡出效果（在你向我们展示的页面上使用），或者甚至是一些其他很酷的弹跳效果，或者即使你知道如何使用jQuery来制作CSS，那么你也可以选择你自己的动画/过渡。这是指向jQuery API fadeIn和fadeOut的链接

我会这样做：

＆＃13;

$(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');
});

＆＃13;

.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; }

＆＃13;

<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>

＆＃13;

我希望你能获得代码背后的理念来获得你想要的结果:) 顺便说一下，我快速制作了HTML Markup以获得类似的转换效果。您需要为导航添加更多动画内容，以便在鼠标悬停上滑动名称等等＃34;东西 - 可以轻松完成：CSS的悬停语法。

希望这有帮助，ps。这是我的第一篇文章，我可能会有一些错误。是的，我的Snippet目前应该有更好的HTML Builddup。

问候 Gkiokan

如何在页面之间进行转换

1 个答案: