按钮触发确认弹窗后点击确定无法跳转页面的问题求助

问题原因 #

button 标签本身不支持 href 属性，你写的 href="people/janemcdonald.html" 完全不会生效——哪怕函数返回 true，浏览器也不会执行跳转逻辑。

解决方案 #

方案1：换成 <a> 标签（推荐） #

把按钮改成链接标签，通过CSS模拟按钮样式，原生的 href 就能配合 onclick 的返回值正常工作：

<a onclick="return myFunction('Jane McDonald')" 
   href="people/janemcdonald.html"
   style="display: inline-block; padding: 8px 16px; border: 1px solid #ddd; border-radius: 4px; background: #f8f8f8; text-decoration: none; color: #333; cursor: pointer;">
  查看Jane McDonald的资料
</a>

你的JavaScript代码不需要修改：点击弹窗「确定」时，return true 允许 <a> 标签的默认跳转行为；点击「取消」时，return false 阻止跳转。

方案2：保留 <button>，在JS里手动跳转 #

去掉HTML里无效的 href 属性，修改JavaScript函数，当用户确认后直接通过 window.location.href 跳转：

<button onclick="myFunction('Jane McDonald')">
  查看Jane McDonald的资料
</button>

function myFunction(person) {
  if (confirm("Do you want to go to " + person + "'s profile?")) {
    // 确认后手动触发跳转
    window.location.href = "people/janemcdonald.html";
  }
}

方案3：用data属性存跳转地址（更灵活） #

把跳转地址存在按钮的 data-href 属性里，函数读取这个属性实现跳转，方便批量处理多个按钮：

<button data-href="people/janemcdonald.html" onclick="return myFunction(this)">
  查看Jane McDonald的资料
</button>

function myFunction(btn) {
  if (confirm("Do you want to go to Jane McDonald's profile?")) {
    window.location.href = btn.dataset.href;
    return true;
  } else {
    return false;
  }
}

内容的提问来源于stack exchange，提问作者Theo Luttrell