使用AJAX隐藏孩子的div

Question

我正在使用AJAX加载页面。在每个网页中，我都有2个div共同点-标头div和内容div。现在，当我从一个页面导航到另一页面时，我可以使用

将下一页的内容div加载到当前页面中

$("#content").load(URL+" #content");

现在，因为我正在使用AJAX加载页面，所以我正在使用History API更改URL并处理历史记录。因此，现在当有人按下浏览器的后退按钮时，出现了一个问题，即在加载过程中同时显示了两个页面的页眉div，但在加载完成后消失了。任何人都可以帮助我如何隐藏加载页面的页眉div。

这是我用来处理浏览器后退按钮的代码

  function swap(href) {

   var x = document.getElementById("myTopnav");
   x.className = "topnav";
   var req = new XMLHttpRequest();
   req.open("GET",
       "http://localhost/" +
         href.split("/").pop(),
       false);
   req.send(null);

   if (req.status == 200) {
      document.getElementById("content").innerHTML = req.responseText;
      $("#content").load(" #content");
      return true;
   }

      return false;
  }

  window.addEventListener("popstate", function(e) {
     swap(location.pathname);
     e.preventDefault();
  });

Answer 1

我认为这应该可行。如果#content是最外面的元素，它将响应包装在DIV中，因为.find()仅搜索内容。

function swap(href) {
  $("#myTopNav").addClass("topnav");
  var url = href.split('/').pop();
  $.get('http://localhost/' + url, function(response) {
      var fragment = $("<div>", {
        html: response
      });
      $("#content").replaceWith(fragment.find("#content"));
    }
  });
}

window.addEventListener("popstate", function(e) {
  swap(location.pathname);
  e.preventDefault();
});