How to implement animation between pages

Question

I have been advised here not to create a single page website.

However, I would like to create animation effects between tabs like this one.

How this can be done if I have a separate HTML for each tab ?

Or maybe you have a better approach...

Answer 1

For each tab at the top (where you click), you'll probably have a link of some sort.

1. Create a function to change the tabs when you click it; e.g. showTab(tab)
2. Attach that function using an onClick event onto each of the links

The function showTab(tabId) can do the following:

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

The links can have inline onclick events like this:

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

If you want fancier animations, you can also use the jQuery .animate function.

See here: jQuery Effects

Answer 2

yes! it's not good to use single page...

for me (just a theory and not been tested), how about this?

1 . make all the pages... (index.html, about-us.html, etc...).
2 . make the menu like the usual way...

<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 . by jQuery edit each <a>'s href like this

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

hope you got the idea.. ;)