gpt4 book ai didi

JavaScript 与 html anchor 冲突

转载 作者:行者123 更新时间:2023-12-03 09:42:15 25 4
gpt4 key购买 nike

我目前正在创建一个website它有一个持久的页眉和页脚。为了减少代码重复,我使用 jquery 在加载每个不同页面时加载 header.html 和 footer.html。

每个使用此页眉和页脚的 html 页面都会使用下面的代码加载它。

<!-- Header and footer loading -->
<script>
$(function() {
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>

<div id="header">
(header.html content rendered here)
</div>

解释下一部分的最佳方法是访问我链接的网站。我想做的是让下拉按钮将用户从网站上的任何其他页面带到设备页面的特定部分。正如您目前所看到的,只有当用户已经在设备页面上时,此功能才有效。

根据我读到的所有内容,跨页 anchor 的设置方式应与页内 anchor 相同。使用<a href="equipment.html#anchorname></a>然后将其链接到页面 <a id="anchorname></a> 。但是,这种方法仅在用户与 anchor 位于同一页面时才有效。我很确定这是由于 anchor 机制的计时和 jQuery 代码运行的时间造成的。

我的两个问题是......

  1. 有人可以解释一下导致我的 anchor 无法工作的事件顺序吗?
  2. 我需要做什么才能让我的跨站 anchor 正常工作?

谢谢,如果您需要特定的代码片段或有任何疑问,请告诉我。

最佳答案

您的跨页面 anchor 完全按照预期工作。考虑禁用 JavaScript 的基本 HTML 页面:

the page

然后#gradalls#trucks将立即“滚动”到相应的 anchor 。我说“滚动”是因为没有足够的内容可以滚动到任何地方 - 页面将只是坐在那里,静止不动。

接下来,您的一系列 jQuery 加载事件将像这样触发:

$(function() {
$("#header").load("header.html");
$("#footer").load("footer.html");
$("#xl4100-99").load("xl4100_99.html");
$("#xl4200-95").load("xl4200_95.html");
$("#lowboy-93").load("lowboy_93.html");
$("#gmctruck-93").load("gmctruck_93.html");
});

它们将填充页面中的各种容器,并且内容将向下增长,但是页面不会滚动。这已经发生了。

解决方案1

最好的解决方案,也是 SEO 友好的解决方案,就是简单地在每个页面中包含内容,并且动态加载它。事实上,除了您的关键字之外,还有一个 search engine simulator只会看到

Dave Ankney Gradall Equipment Gradalls Trailers Trucks

并且没有任何链接。然后它可能会消失很长一段时间,因为那里没有任何东西多汁。由于您使用的是 S3,因此您必须手动将内容包含在每个页面中。

解决方案2

要么使用适当的服务器后端(例如 PHP),在这种情况下,您可以只包含 HTML 的每个部分,如下所示:

<body>
<div class="main">
<div id="header"><?php include("header.php"); ?>
</div>

(仅重命名 header.html 为 header.php)

解决方案3

如果你真的只是想让跳转开始工作,你可以像这样改变你的 JS:

<!-- Header and footer loading -->
<script>
$(function() {
// Create Deferred instances that can be handed to $.when()
var d1 = $.Deferred();
var d2 = $.Deferred();
// var d3 =
// var d4 =

// Set up a chain of events
$.when(d1, d2).then(function() {
// When everything has loaded, jump to the fragment
var hash = window.location.hash
if (hash !== "") {
window.location.hash = hash;
}
});

// Perform the load calls
$("#header").load("header.html", function() { d1.resolve(); });
$("#footer").load("footer.html", function() { d2.resolve(); });
// ...
});
</script>

我希望这就是您正在寻找的内容。

关于JavaScript 与 html anchor 冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31153909/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com