Ajax div更改淡出

Question

i want to:

1. show load content from X.div
2. on click a nav div fade out content
3. load content

4. show new content

   $(document).ready(function(){
       $('#allcontent').load('data/home.html');
   
       $('.hovers').click(function() {
          var page = $(this).attr('href'); 
          $('#allcontent').fadeOut('slow', function() {
             $(this).load('data/' + page + '.html').show();
          });
          return false;
       });
   

Why is this not working?

Here's my fiddle: DEMO

Answer 1

I think this part would be:

$('.hovers').click(function() {
   var page = $(this).attr('href'); 
   $('#allcontent').fadeOut('slow', function() {
   $(this).load('data/' + page).show();
});

Since the js can load the pages that don't have a reference to .html or other file extensions. Just attr('href') is enough.

And the remaining part is correct!

Plus: You need to check whether the source location exists or not, you can use Browser's inspector for that. Please press <kbd>F12</kbd> and there in the Network tab, you can check for each page load, and its HTTP code, if there is 404, then the file is not present and you need to test the link. You will find other helpfull material there too.