使用 AJAX 隐藏 child 的 div

Question

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

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

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

现在我正在使用 AJAX 加载页面，所以我正在更改 URL 并使用历史记录 API 处理历史记录。所以现在当有人按下浏览器的后退按钮时就会出现问题，两个页面的 header div 在加载期间都显示但在加载完成后消失。那么谁能帮我隐藏加载页面的headerdiv

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

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

使用 AJAX 隐藏 child 的 div

Hide a div of the child using AJAX

html

javascript

ajax

back-button