如何實現頁面間的動畫

我建議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

如何實現頁面間的動畫

回答

相關問題