如何仅使用 HTML 在新选项卡中打开按钮链接？答案

【问题标题】：How to make a button link open in a new tab only using HTML?如何仅使用 HTML 在新选项卡中打开按钮链接？
【发布时间】：2020-04-23 01:21:40
【问题描述】：

我有这段代码：

<button name='link' onclick="window.location.href = 'Text.html';"  
style="cursor:pointer"  class='Text' value='Text.html' title='Text'>Text</button>

点击它会带你到我的一个子网站。我希望它在新选项卡中打开链接，所以我尝试将target='_blank' 放在按钮标签中，但它不起作用。如果可能的话，我更喜欢使用 HTML。

谢谢

【问题讨论】：

标签： html button hyperlink attributes

【解决方案1】：

用form怎么样

<form action="//example.com/Text.html" target="_blank">
    <button type="submit">Text</button>
</form>

这可以带到不同的站点或您的任何子站点。

【讨论】：

【解决方案2】：

将按钮标记替换为

<a href="Text.html" title="Text" target="_blank">Text</a>

【讨论】：

【解决方案3】：

编辑：虽然原始答案有效，但它不符合 W3C HTML5 规范。另一种方法是编辑 onclick 属性中的 JavaScript 以在新选项卡中打开链接。

<button
  onclick="window.open('Text.html', '_blank')"
  name="link"
  style="cursor: pointer"
  class="Text"
  value="Text.html"
  title="Text"
>
  Text
</button>

您可以在按钮周围包裹一个<a> 标签。

<a href="Text.html" target="_blank">
  <button
    name="link"
    style="cursor: pointer"
    class="Text"
    value="Text.html"
    title="Text"
  >
    Text
  </button>
</a>

【讨论】：

你真的不应该把按钮标签放在标签里
见stackoverflow.com/questions/6393827/…
没错，这不是最佳做法。如果您不介意添加一些 JS，可以将 onclick 属性编辑为 window.open('Text.html', '_blank')。