在前端开发中，有时需要通过JavaScript动态修改页面中的标签按钮的链接地址。比如，当用户点击不同按钮时，需要跳转到不同的页面或执行不同逻辑。那么，该如何实现这个功能呢？下面我们就来详细讲解。
1. 获取标签对象
首先，我们需要获取到要修改链接的标签对象，可以通过以下方法获取：
const link = document.querySelector('a');这里我们使用了querySelector方法，它可以根据选择器字符串返回匹配的第一个元素对象。如果有多个标签，可以使用querySelectorAll方法获取所有的标签，然后再通过循环遍历来操作每个标签对象。
2. 修改链接地址
获取到标签对象之后，就可以修改其链接地址了。我们可以通过href属性来修改，例如：
link.href = 'http://www.example.com';
这样就会将标签的链接地址修改为http://www.example.com。
除了直接设置href属性外，我们还可以通过拼接字符串的方式来动态生成链接地址。例如，根据用户选择的不同，生成不同的链接地址：
const id = 123;
link.href = `http://www.example.com?id=${id}`;这里使用了模板字符串和字符串插值的语法，${id}会被替换为变量id的值。
3. 阻止默认事件
在修改标签链接地址之后，可能需要阻止默认的链接跳转行为。否则，点击标签按钮时，浏览器将会跳转到新的页面，而不是执行JavaScript逻辑。可以通过以下方式来阻止默认事件：
link.addEventListener('click', function(event) {
event.preventDefault();
});这里使用了addEventListener方法来监听标签的click事件，并在回调函数中调用了preventDefault方法来阻止默认事件。
示例代码
下面是一个完整的示例代码，演示如何在用户点击按钮时动态修改标签的链接地址并阻止默认事件：
<!-- HTML --> <button id="button1">Button 1</button> <button id="button2">Button 2</button> <a href="#" id="link">Link</a>
-- -------------------- ---- ------- -- ---------- ----- ------- - ----------------------------------- ----- ------- - ----------------------------------- ----- ---- - -------------------------------- --------------------------------- ---------- - --------- - ------------------------------- --- --------------------------------- ---------- - --------- - ------------------------------- --- ------------------------------ --------------- - ----------------------- ----------------- ---------- ---
上述代码中，我们创建了两个按钮和一个标签对象，并分别给按钮绑定了点击事件。当用户点击按钮1时，会将标签的链接地址修改为http://www.example.com/page1，当点击按钮2时，则会将标签的链接地址修改为http://www.example.com/page2。同时，在标签上绑定了点击事件，阻止了默认跳转行为。运行代码后，可以在浏览器控制台中看到输出Link clicked。
总结
通过上述步骤，我们可以很容易地实现通过JavaScript动态修改标签的链接地址。需要注意的是，在修改链接地址之后，可能需要阻止默认事件，避免跳转到新页面。希望这篇文章能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12396