使用 AJAX 隐藏子级的 div

Question

我正在使用 AJAX 加载页面。在每个网页中，我都有 2 个常见的 div - 标题 div 和内容 div。现在，当我从一个页面导航到另一个页面时，我使用以下命令将下一页的内容 div 加载到当前页面中$("#content").load(URL+" #content");现在，由于我使用 AJAX 加载页面，因此我正在更改 URL 并使用 History API 操作历史记录。所以现在当有人按下浏览器的后退按钮时就会出现问题，两个页面的标题 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();

});