페이지간에 애니메이션을 구현하는 방법

Question

here 단일 페이지 웹 사이트를 만들지 말 것을 권유 받았습니다.

그러나 this one과 같은 탭간에 애니메이션 효과를 만들고 싶습니다.

각 탭마다 별도의 HTML이 있다면 어떻게 할 수 있습니까?

아니면 당신이 더 나은 방법이 ... (당신은 클릭) 상단의 각 탭에 대한

Answer 1

그래! 단일 페이지를 사용하는 것이 좋지 않습니다 ...

나를 위해 (단지 이론과 테스트되지 않았습니다), 이것에 대해 어떻습니까?

. 모든 페이지를 만드십시오 ... (index.html, about-us.html, etc ...).
. ... 일반적인 방법과 같은 메뉴를 만들

3

<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를에 의해

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

당신이 생각 .. 얻었기를 바랍니다 각 <이 같은>의 HREF 편집)

Answer 2

, 당신은 아마 어떤 종류의 링크를해야합니다.

1. 클릭하면 탭을 변경하는 기능을 만듭니다. 예 :

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

   링크는이 같은 인라인 온 클릭 이벤트를 가질 수 있습니다 showTab(tab)

함수 showTab (TABID는) 다음과 같은 작업을 수행 할 수있는 링크의 각 상에 onClick 이벤트를 사용하여 해당 기능을 연결합니다 :

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

환상적인 애니메이션이 필요한 경우 jQuery .animate 기능을 사용할 수도 있습니다.

는 여기를 참조하십시오 : jQuery Effects