Question

我在菜单点击时使用了淡入效果进行了AJAX导航，并使用{{ }}获取了我的网址链接，现在我如何才能对history.pushstate功能产生相同的效果？（当用户点击浏览器的返回按钮时）：

这是我的代码：

onpopstate

Answer 1

我认为你只需要提取你的函数并对其进行操作或调用它有点不同，因为你没有带有href的实际DOM元素

function getYourData (someHref) { 
  var page = someHref || $(this).attr("href"); // override or default
  $.ajax({
    url: "pages/" + page,
    cache: false,
    success: function (html) {
      afficher(html, page);
      history.pushState({ key: 'value'}, 'hash', page);
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      afficher("erreur lors du chagement de la page");
    }
  });
  return false;
}

$(document).ready(function() {
  $("#menu a").click(getYourData);
  $('#container').on('click', '.vs-transform a', getYourData);

  window.onpopstate = function(event) {
    if (event.state === null) {
      getYourData(document.referrer); // some href
    }
  };
});


function afficher(data, page) {
  $("#container").delay( 100 ).fadeOut(400, function() {
    $("#container").empty();                
    $("#container").append(data);
    $("#container").fadeIn(500);
  });
}

我如何使用ajax在onClick和onpopstate上获得相同的功能

1 个答案: