如何实现页面间的动画

我建议here不要创建单个页面网站。如何实现页面间的动画

但是，我想在标签之间创建动画效果，如this one。

如果我为每个选项卡都有单独的HTML，可以这样做吗？

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

来源

2010-06-03 Misha Moroshko

是的！它不好使用单页...

对我来说（只是一个理论，没有经过测试），这是怎么回事？

。使所有的网页......（index.html，about-us.html等...）。
。使菜单像通常的方式...

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

。的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.... 
     } 
    }) 
}

希望你有这个想法..;）

来源

2010-06-03 02:31:27 Reigel

对于在顶部（在那里你点击）每个选项卡，你可能有某种联系。

创建一个函数来更改选项卡，当你点击它;例如showTab(tab)
附加使用onClick事件该函数到每个链接的

函数showTab（tabId）可以执行以下操作：

function showTab(tabId) { 
    $('.tabs').slideUp(); 
    $('#' + tabId).slideDown(); 
}

中的链接可具有内嵌的onclick事件是这样的：

<a id="contactlink" href="#" onclick="showTab('contactlink'); return false;">Contact up</a> 
...

如果你想要更好的动画，你也可以使用jQuery .animate函数。

在这里看到：jQuery Effects

来源

2010-06-03 01:56:22 phsource

这里有几件事情，内嵌事件处理程序的边界线邪（只是在开玩笑，但严重没有必要），你的例子将意味着该选项卡具有与锚点相同的ID，也是无效的。下面是一个你没有内嵌脚本，整体代码较少并且在javascript被禁用的情况下的示例：http://jsfiddle.net/fNJDj/ – 2010-06-03 02:05:28

嗨，尼克，但我想，你的例子将只是一个页面网站...;）和OP对此有第二个想法...;） – Reigel 2010-06-03 02:42:22

如何实现页面间的动画

回答

相关问题