因此,我尝试使用以下引用在网页上重新创建圆形导航: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>
这一切都适用于不同导航上的所有按钮。如何在“了解更多”按钮的每个导航中动态更改链接引用?
最佳答案
编辑:因为我显然错过了问题的 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
值。
关于javascript - 如何动态更改 HTML "a href"标签上的 "rect"链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52806387/