javascript - 动态加载内容

Question

我想使用 Ajax 加载内容并只保留标题不被重新加载，类似于这个站点。

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

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

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

我究竟做错了什么？

更新

抱歉，我确实错过了引用，href尽管它仍然对我不起作用。

score 2 · Accepted Answer

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

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

  e.preventDefault();
});

您需要在 attr 周围添加引号，并通过添加 preventDefault() 来阻止链接更改页面。

编辑：

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

$('nav li a')

你确定它不是为了#nav或.nav（对于 ID 或类）？

score 0 · Accepted Answer

要实现地址栏的变化，需要用到window的history对象。

从该页面：

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