动态加载内容

Question

我想使用Ajax加载内容并仅保留重新加载的标头，类似于site。

到目前为止，我有这个，但不知道还有什么可以添加以获得相同的效果。我注意到在该网站上，URL也会随着标题的内容而改变，这正是我想要的。查看源代码后，除了注意URL中的.php扩展名外，我找不到任何他正在使用的内容。

$('nav li a').click(function(){
  // var pageurl = $(this).attr(href);
  var pageurl = $(this).attr('href');

  $('#wrap').load(pageurl);
});

我做错了什么？

更新

抱歉，我确实错过了href上的引号，虽然它仍然不适用于我。

Answer 1

$('nav li a').click(function(e){
  var pageurl = $(this).attr('href');

  $('#wrap').load(pageurl);

  e.preventDefault();
});

您需要在attr周围添加引号，并通过添加preventDefault（）来停止更改页面的链接。

修改

我刚注意到你的选择器是：

$('nav li a')

您确定它不是#nav或.nav（对于ID或类）吗？

Answer 2

要在地址栏中实现更改，您需要使用窗口的历史对象。

检查https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history

从该页面开始：

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");