javascript - 如何动态更改 HTML "a href"标签上的 "rect"链接？

Question

因此，我尝试使用以下引用在网页上重新创建圆形导航:https://codepen.io/gzuzkstro/pen/oemMyN

---

但是，我对每个导航中“了解更多”按钮上的链接引用感到困惑。有 7 个导航和 1 个“rect”标签来生成“了解更多”按钮。当我放置“a href”标签时，它起作用了，但所有按钮都引用相同的 URL。 “rect”标 checkout 现在 HTML 文件的第 320 行。

---

我这样放置“a href”标签

<a href="index.html"><rect data-url="/industries" id="learn-more" x="280" y="250" width="90" height="30" /></a>

这一切都适用于不同导航上的所有按钮。如何在“了解更多”按钮的每个导航中动态更改链接引用？

Answer 1

编辑:因为我显然错过了问题的 rect 部分，这里有一个新的答案。旧答案保留在下面作为引用。

新答案:

简短的回答是你不知道。 Rect 不是 anchor ，因此无论是否为其添加 href 属性，都不会产生任何影响。解决此问题的最简单方法是将目标 URL 存储在一个变量中，您绑定(bind)到 rect 元素的点击处理程序可以访问该变量。

在圆圈的点击处理程序中，您更新此变量的值，然后在 rect 的点击处理程序中，您使用该变量。不过，它将是一个全局变量，所以我已经可以看到有人在下面的评论中发布了一封抗议信。

如果您不喜欢全局变量，您可以在 rect 上设置数据属性，并在点击处理程序中读取它。

关于您的实际代码，您有几个 g.service 标签，用户可以点击这些标签来选择服务。然后您有一个代表“了解更多”链接的 rect。当用户点击 g.service 时，就是根据上述解决方案之一设置目标 URL(作为全局变量，或 rect 上的属性) >).最后，当用户点击 rect 时，您会将他们带到目标 URL。

虽然这应该可行，但这是个坏主意。使用链接的 anchor 标记以外的元素是糟糕的用户体验。例如，用户不能像往常一样右键单击复制链接或在新标签页中打开链接等。我建议您更改设计并使用 anchor 标记。中间的部分看起来不需要是 SVG。

旧答案:

由于您的代码非常复杂，而且我不想通读所有内容来弄清楚您必须修复什么，所以我将向您提供一个关于您需要做什么的大致概念。我看到您在那里使用 jQuery，所以该示例使用的是 jQuery。

var learnMore = $('.learnmore');

$('.buttons').on('click', '.topic', function (event) {
  var url = $(event.target).data('url');
  learnMore.attr('href', url);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <a class="learnmore" href="#foo">Learn more</a>
</div>

<div class="buttons">
  <button class="topic" data-url="#foo">Foo</button>
  <button class="topic" data-url="#bar">Bar</button>
  <button class="topic" data-url="#baz">Baz</button>
</div>

我们有一个基本的 HTML 结构，其中有一个 anchor ，它具有我们要操作的 href 属性。我们还有几个交互元素(在示例中是 button)，它们将在单击时设置 href。

思路是处理点击事件，读取data-url属性，然后使用该属性设置 anchor 的href值。