Question

因此，我正在尝试使用以下参考文献在网页上重新创建圈子导航：https://codepen.io/gzuzkstro/pen/oemMyN

但是，我对每个导航上的“了解更多”按钮上的链接参考感到困惑。有7个导航，只有1个“ rect”标签可以生成“ Learn more”按钮。当我放置“ a href”标签时，它可以工作，但是所有按钮都引用相同的URL。 HTML文件的第320行显示“ rect”标签。

我这样放置“ 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不是锚，因此，无论是否向其添加href属性，都不会起作用。解决此问题的最简单方法是将目标URL存储在您绑定到rect元素的点击处理程序可以访问的变量中。

在圆的单击处理程序中，更新此变量的值，然后在rect的单击处理程序中，使用变量。不过，这将是一个全局变量，因此我已经可以看到有人在下面的评论中张贴了抗议信。

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

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

现在，尽管这应该可行，但这是一个坏主意。对链接使用锚标记以外的元素是糟糕的UX。例如，用户无法进行通常的右键单击来复制链接或在新选项卡中打开链接等。我建议您更改设计并使用定位标记。中间的部分看起来不需要是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结构，其中有一个锚点，该锚点具有我们要操作的href属性。我们还具有几个交互式元素（在示例中为button），这些元素将在单击时设置href。

这个想法是处理click事件，读取data-url属性，然后使用该属性设置锚点的href值。

如何动态更改HTML“ rect”标记上的“ a href”链接？

1 个答案: