javascript - 如何实现页面之间的动画

Question

我已被告知here不要创建单页网站。

但是，我想在选项卡之间创建动画效果，例如 this one .

如果每个选项卡都有单独的 HTML，如何做到这一点？

或者也许你有更好的方法......

Answer 1

是的!使用单页不太好...

对我来说(只是一个理论，未经测试)，这个怎么样？

1 .制作所有页面...(index.html、about-us.html 等...)。
2 .使菜单像平常一样...

<ul class="menu">
     <li><a href="index.html">Home</a></li>  
     <li><a href="about-us.html">About Us</a></li>  
     <li><a href="contact.html">Contact</a></li>  
</ul>

3 .通过 jQuery 编辑每个 的 href，如下所示

$('ul.menu a').attr('href', function(i,v){ return '#' + v })
      .click(function(){
           openTab(this.href.replace('#',''));
      })
openTab(window.location.href.replace('#','')); // call in all pages for bookmark purpose
function openTab(url){
   $('#content').slideUp();
   $.ajax({
      url: url,
      method: 'get',
      success: function(html){
         // find the content to be displayed
         $('#content').html(html.find('#content').contents())
            .slideDown(); // then animate....
      }
   })
}

希望你明白了..;)