如何让按钮在新窗口打开网页？嵌入a标签失效求助

为什么内嵌<a>标签没用？ #

HTML规范里不允许在<button>里嵌套<a>标签，这种结构属于无效嵌套，浏览器会自动修正DOM结构，导致锚点的跳转功能直接失效。

方案1：用<a>标签替代按钮（推荐） #

直接把按钮换成<a>标签，保留原有的按钮类名，既能保留原样式，又能正常触发跳转：

<ul class="card-action-list">
  <li class="card-action-item">
    <a class="card-action-btn" target="_blank" rel="noopener noreferrer" href="producttest.html" aria-labelledby="card-label-1">
      <ion-icon name="cart-outline"></ion-icon>
    </a>
    <div class="card-action-tooltip" id="card-label-1">Open In New Tab</div>
  </li>

  <li class="card-action-item">
    <a class="card-action-btn" target="_blank" rel="noopener noreferrer" href="producttest.html" aria-labelledby="card-label-2">
      <ion-icon name="cart-outline"></ion-icon>
    </a>
    <div class="card-action-tooltip" id="card-label-2">Open In New Window</div>
  </li>

  <li class="card-action-item">
    <button class="card-action-btn" aria-labelledby="card-label-3">
      <ion-icon name="share-social-outline"></ion-icon>
    </button>
    <div class="card-action-tooltip" id="card-label-3">Share Link</div>
  </li>
</ul>

小提示：如果原来的.card-action-btn样式是针对<button>写的，可能需要加几行CSS确保<a>标签表现和按钮一致：

.card-action-btn {
  text-decoration: none; /* 去掉下划线 */
  cursor: pointer; /* 鼠标悬停显示指针 */
  border: none; /* 移除默认边框 */
  background: transparent; /* 背景透明，和按钮样式对齐 */
}

方案2：给按钮加点击事件跳转 #

如果必须保留<button>元素，用JavaScript实现跳转：

方式1：内联点击事件（简单直接）

<ul class="card-action-list">
  <li class="card-action-item">
    <button class="card-action-btn" aria-labelledby="card-label-1" onclick="window.open('producttest.html', '_blank')">
      <ion-icon name="cart-outline"></ion-icon>
    </button>
    <div class="card-action-tooltip" id="card-label-1">Open In New Tab</div>
  </li>

  <li class="card-action-item">
    <button class="card-action-btn" aria-labelledby="card-label-2" onclick="window.open('producttest.html', '_blank')">
      <ion-icon name="cart-outline"></ion-icon>
    </button>
    <div class="card-action-tooltip" id="card-label-2">Open In New Window</div>
  </li>

  <li class="card-action-item">
    <button class="card-action-btn" aria-labelledby="card-label-3">
      <ion-icon name="share-social-outline"></ion-icon>
    </button>
    <div class="card-action-tooltip" id="card-label-3">Share Link</div>
  </li>
</ul>

方式2：事件监听（更规范）

把JS代码单独写在脚本标签里（放在页面底部，确保DOM加载完成后执行）：

document.addEventListener('DOMContentLoaded', function() {
  // 获取需要跳转的按钮
  const jumpButtons = document.querySelectorAll('.card-action-btn[aria-labelledby="card-label-1"], .card-action-btn[aria-labelledby="card-label-2"]');
  
  jumpButtons.forEach(btn => {
    btn.addEventListener('click', function() {
      window.open('producttest.html', '_blank');
    });
  });
});

额外注意点 #

你原代码里的aria-labelledby属性有错误：前两个按钮都指向了card-label-1，第二个按钮应该对应card-label-2，第三个对应card-label-3，上面的代码已经修正了这个问题，这对无障碍访问很重要。

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