如何通过确认对话框完成按钮页面跳转

点击按钮时弹出确认提示，用户点击“确定”后跳转到指定页面，关键在于正确使用 window.location.href 而非依赖 <button> 的无效 href 属性。

点击按钮时弹出确认提示，用户点击“确定”后跳转到指定页面，关键在于正确使用 `window.location.href` 而非依赖 `` 的无效 `href` 属性。

在 HTML 中，<button> 元素原生不支持 href 属性——该属性仅对 <a>（链接）标签有效。因此，你在按钮上写的 href="people/janemcdonald.html" 实际被浏览器忽略，不会触发任何跳转行为。同时，onclick="return myFunction(...)" 中的 return 仅用于控制事件是否默认执行（对 <button> 来说本无默认跳转行为），因此即使函数返回 true，也不会自动导航。

要实现“确认后跳转”，需在 JavaScript 中显式触发页面重定向。以下是推荐的修复方案：

✅ 正确写法（HTML + JavaScript）：

<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    window.location.href = "people/janemcdonald.html";  }  // 若用户点击“取消”，不执行任何操作（无需 return false）}

? 注意事项：

• 不要在 <button> 上添加 href 属性，它无效且易引发误解；
• onclick 中无需 return，因为跳转由 JS 主动控制，而非依赖事件默认行为；
• 若需动态生成跳转路径（如不同人员对应不同页面），可将 URL 作为参数传入函数，提升复用性：

  function goToProfile(person, url) {  if (confirm(`Do you want to go to ${person}'s profile?`)) {    window.location.href = url;  }}// 调用：<button onclick="goToProfile('Jane McDonald', 'people/janemcdonald.html')">

? 补充建议：
对于更现代、语义化和可访问性更好的实现，推荐改用 <a> 标签配合 confirm() 阻断默认行为（需 event.preventDefault()），或使用 <button> 结合无障碍属性（如 role="link" 和 aria-label）并确保键盘操作兼容。但就当前需求而言，上述 window.location.href 方案简洁、可靠、兼容所有浏览器。