javascript - 使用 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();
});