Change div content and hash url

Question

I made a fully functional Ajax Content Replacement script. The problem is that it adds forwards like /#about or /#work or /#contact to the adress but when I reload the site, the main page will be show. Why? How is it possible that when i type in the adress the right subpage will be show?

Someone told me that the problem is that I added the file manually when I use popstate. So I want a solution without popstate. I am not a Javascript expert but I would like to learn it. Because popstate but this is very circuitous.

window.location.hash = $(this).attr('href'); 

My .html files are in stored in /data/. The strange thing is that it finds the file but when I try to find it manually,the page show the main page or when I refresh the site with F5 the main page will be show,too.

Can you help me and show me how it works. We can use my code to find the error. Thanks a lot.

Here is the Websitelink : Demo Link

function refreshContent() {
var targetPage = 'home';
var hashMatch = /^#(.+)/.exec(location.hash);
// if a target page is provided in the location hash
if (hashMatch) {
  targetPage = hashMatch[1];
}
$('#allcontent').load('data/' + targetPage + '.html');
}


$(document).ready(function(){
refreshContent();
window.addEventListener('hashchange', refreshContent, false);
$('.hovers').click(function() {
var page = $(this).attr('href'); 
$('#allcontent').fadeOut('slow', function() {
$(this).animate({ scrollTop: 0 }, 0);
$(this).hide().load('data/' + page +'.html').fadeIn('normal');
});

});
});

$('.hovers').click(function() {
  window.location.hash = $(this).attr('href'); 
  $.get('data/'+this.href, function(data) {
    $('#allcontent').slideTo(data)      
  })
  return false  
})

Answer 1

You should load the initial page based on location.hash (if provided) on page load:

function refreshContent() {
   var targetPage = 'home';
   var hashMatch = /^#!\/(.+)/.exec(location.hash);
   // if a target page is provided in the location hash
   if (hashMatch) {
      targetPage = hashMatch[1];
   }
   $('#allcontent').load('data/' + targetPage + '.html');
}


$(document).ready(function(){
   refreshContent();
   ...

You can make back and forward work by listening to the Window.onhashchange event:

window.addEventListener('hashchange', refreshContent, false);

Do note that this doesn't work in Internet Explore 7 or lower.

Edit:

Okay, try this:

var $contentLinks = null;
var contentLoaded = false;

function refreshContent() {
   var targetPage = 'home';
   var hashMatch = /^#(.+)/.exec(location.hash);
   var $content = $('#allcontent');

   // if a target page is provided in the location hash
   if (hashMatch) {
      targetPage = hashMatch[1];
   }

   // remove currently active links
   $contentLinks.find('.active').removeClass('active');
   // find new active link
   var $activeLink = $contentLinks.siblings('[href="' + targetPage + '"]').find('.navpoint');
   // add active class to active link
   $activeLink.addClass('active');
   // update document title based on the text of the new active link
   window.document.title = $activeLink.length ? $activeLink.text() + ' | Celebrate You' : 'Celebrate You';

   // only perform animations are the content has loaded
   if (contentLoaded) {
       $content
           .fadeOut('slow')
           .animate({ scrollTop: 0 }, 0)
       ;
   }

   // after the content animations are done, load the content
   $content.queue(function() {
       $content.load('data/' + targetPage + '.html', function() {
           $content.dequeue();
       });
   });

   if (contentLoaded) {
       $content.fadeIn();
   }

   contentLoaded = true;
}

$(document).ready(function() {
    $contentLinks = $('.hovers');

    refreshContent();

    window.addEventListener('hashchange', refreshContent, false);

    $contentLinks.click(function(e) {
        e.preventDefault();
        window.location.hash = '!/' + $(this).attr('href'); 
    });
});