单击事件上带有内容加载器 div 的 JavaScript 哈希 URL答案

【问题标题】：JavaScript hash URL with content loader div on click event单击事件上带有内容加载器 div 的 JavaScript 哈希 URL
【发布时间】：2021-08-26 02:23:51
【问题描述】：

我已经在 javascript 中创建了哈希加载 URL 函数，一切都完美预期的一个问题，即 - 我想要，如果我点击 URL <div class="loader"</div> 将附加。这基本上是一个加载器，它将代表加载的东西。我已经在使用此代码$("body > div.content").append('<div class="loader"</div>');，但此加载器仅在我重新加载页面时才起作用。我想当我点击<a href="#page">CLICK HERE</a> 类型时点击我也会显示加载器。

我如何实现目标并修复我的代码。请帮帮我

function loadcontent(hash) {
  if (hash == "") {
    hash = "./home.html";
  }
  $("html body").animate({
    scrollTop: 0
  }, "600", "swing");
  $("body > div.content").load("directory/" + hash);
}

$(window).on("hashchange", function() {
  loadcontent(location.hash.slice(1));
});

var url = window.location.href;
var hash = url.substring(url.indexOf("#") + 1);
if (hash === url) {
  hash = "./home.html";
}
$("body > div.content").append('<div class="loader"</div>');
$("div.content > div").load("directory/" + hash, function(responseTxt, statusTxt, jqXHR) {
  if (statusTxt == "success") {
    $("div.loader").remove(); return true;
  } else {
    if (statusTxt == "error") {
      $("div.loader").remove();
      alert("Error : " + jqXHR.status + " " + jqXHR.statusText);
      return false;
    }
  }
});

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【问题讨论】：

标签： javascript jquery url hash load

【解决方案1】：

<a href="#page" onclick="loadcontent(hash)">CLICK HERE</a>

如果您不想重定向，您可能必须在 loadcontent() 中返回 false。

【讨论】：

当我使用 onclick 时它不会重定向页面，你能按照你的意思更新我的脚本吗
return true 下面应该解决它if (statusTxt == "success") { $("div.loader").remove(); return true; }