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

Posted 2023-03-29

【中文标题】单击事件上带有内容加载器 div 的 JavaScript 哈希 URL

【英文标题】：JavaScript hash URL with content loader div on click event

【发布时间】：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;
    
  
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【参考方案1】：

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

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

【讨论】：

当我使用 onclick 时它不会重定向页面，你能按照你的意思更新我的脚本吗

return true 下面应该解决它if (statusTxt == "success") $("div.loader").remove(); return true;