时间戳

首页 > 解决方案 > 使用 AJAX 隐藏孩子的 div

javascript - 使用 AJAX 隐藏孩子的 div

问题描述

我正在使用 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();
  });

标签： javascripthtmlajaxback-button

解决方案

我认为这应该有效。它将响应包装在 DIV 中，以防万一#content是最外层元素，因为.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();
});

推荐阅读