更改div内容和哈希网址

Question

我制作了一个功能齐全的Ajax内容替换脚本。问题是，它会向地址添加 /＃about 或 /＃work 或 / #actact 之类的转发，但是当我重新加载网站时，主页面将显示。为什么？当我输入地址时，如何显示正确的子页面？

有人告诉我问题是我在使用popstate时手动添加了文件。所以我想要一个没有popstate的解决方案。我不是Javascript专家，但我想学习它。因为popstate但这非常迂回。

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

我的.html文件存储在 / data / 中。奇怪的是它找到了文件但是当我尝试手动找到它时，页面会显示主页面，或者当我用F5刷新网站时，主页面也会显示。

你能帮帮我，告诉我它是如何运作的。我们可以使用我的代码来查找错误。非常感谢。

以下是网址链接： 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

您应该在页面加载时根据location.hash（如果提供）加载初始页面：

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.onhashchange事件来回溯和转发工作：

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

请注意，这在Internet Explore 7或更低版​​本中不起作用。

修改

好的，试试这个：

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'); 
    });
});