有没有办法让 <button> 元素链接到一个位置而不将其包装在 <a href ... 标签中？

Posted 2023-02-22

【中文标题】有没有办法让 <button> 元素链接到一个位置而不将其包装在 <a href ... 标签中？

【英文标题】：Is there a way to get a <button> element to link to a location without wrapping it in an <a href ... tag?

【发布时间】：2011-06-28 21:31:47

【问题描述】：

只是想知道是否有办法让 html <button> 元素链接到一个位置，而不用将其包装在 <a href... 标记中？

按钮目前的样子：

<button>Visit Page Now</button>

我希望不拥有的东西：

<a href="link.html"><button>Visit Page Now</button></a>

该按钮未在表单中使用，因此<input type="button"> 不是一个选项。我只是想看看是否有一种方法可以链接这个特定元素而无需将其包装在 <a href 标记中。

期待听到一些选项/意见。

【问题讨论】：

为什么要将按钮作为链接？为什么不只是一个链接？

@robertc，我通常使用链接，但是 元素的意义何在？

按钮元素的意义在于触发脚本功能，例如重新计算表单上的交付成本或对选定文本应用粗体格式，HTML 本身不支持这些功能。在页面之间导航是 HTML 支持的，您不需要脚本来执行它，因此您不需要按钮。

此外，将<button> 包裹在<a> 中在IE 中不起作用。除了表单之外的任何地方的按钮的目的是执行一些脚本操作。

【参考方案1】：

内联 javascript：

<button onclick="window.location='http://www.example.com';">Visit Page Now</button>

在 Javascript 中定义一个函数：

<script>
    function visitPage()
        window.location='http://www.example.com';
    
</script>
<button onclick="visitPage();">Visit Page Now</button>

或在 Jquery 中

<button id="some_id">Visit Page Now</button>

$('#some_id').click(function() 
  window.location='http://www.example.com';
);

【讨论】：

感谢@aiham，这行得通。为了更灵活，url 应该是 visitPage 函数的参数。

我正在使用 ASP.NET MVC。我怎样才能POST 数据并定向到 Controller 的 另一个 Action Method？

这是一个误导性的答案，因为链接元素将是所需的元素。选择元素时将功能和设计分开！

【参考方案2】：

这是一个即使在禁用 JavaScript 时也能正常工作的解决方案：

<form action="login.html">
    <button type="submit">Login</button>
</form>

诀窍是用自己的<form> 标签包围按钮。

我个人更喜欢<button> 标签，但你也可以使用<input>：

<form action="login.html">
    <input type="submit" value="Login"/>
</form>

【讨论】：

一个问题：action 属性值中的任何 URL 参数都将被剥离，因为 get 方法表单（并且表单默认为 get 方法）应该提供自己的参数.例如，<form action="https://example.com/foo?bar=1"><input type="submit" value="Login"/></form> 会将用户发送到“https://example.com/foo?”。如果您在form 元素中设置method="post" 的属性值，用户将被发送到正确的URL，但目的地可能仍然有问题，因为该站点随后收到一个POST 请求，而不是预期的GET 请求。

【参考方案3】：

就这样做

<button OnClick=" location.href='link.html' ">Visit Page Now</button>

虽然，我已经有一段时间没有接触 JavaScript 了——也许 location.href 已经过时了？不管怎样，我就是这样做的。

【参考方案4】：

链接很棘手

考虑一下 默认知道但 javascript 链接对您不起作用的技巧。在一个体面的网站上，任何想要充当链接的东西都应该以一种或另一种方式实现这些功能。即：

Ctrl+单击：在新选项卡中打开链接

您可以使用不带位置/大小参数的 window.open() 来模拟此操作

Shift+单击：在新窗口中打开链接

您可以通过指定大小和/或位置的 window.open() 进行模拟

Alt+Click：下载目标

人们很少使用这个，但如果你坚持要模拟它，你需要在服务器端编写一个特殊的脚本来响应正确的下载标题。

轻松退出

现在，如果您不想模拟所有这些行为，我建议您使用 并将其设置为 按钮，因为按钮本身大致是一个形状和悬停效果.我认为如果只有“按钮而没有其他东西”在语义上并不重要，那么 就是武士的方式。如果您担心语义和可读性，您还可以在文档准备好时替换按钮元素（）。清晰安全。

【参考方案5】：

嗯，对于一个链接，周围必须有一个链接标签。您还可以做的是为按钮创建一个 CSS 类并将该类分配给链接标签。喜欢，

#btn 
  background: url(https://image.flaticon.com/icons/png/128/149/149668.png) no-repeat 0 0;
  display: block;
  width: 128px;
  height: 128px;
  border: none;
  outline: none;

<a href="btnlink.html" id="btn"></a>

【参考方案6】：

您可以将其设为非提交按钮 (<button type="button">) 并将 window.location = 'http://where.you.want/to/go' 之类的内容挂接到其 onclick 处理程序中。但是，如果没有启用 javascript，这将不起作用。

或者您可以将其设为提交按钮，并在服务器上进行重定向，虽然这显然需要某种服务器端逻辑，但好处是不需要 javascript。

（实际上，忘记第二个解决方案——如果你不能使用表单，提交按钮就出来了）

【参考方案7】：

<form action="portfolio.html">
 <button type="link" class="btn btn-primary btn-lg">View Work</button>
</form>

我刚刚发现了这一点，它可以完美地链接到另一个页面，而无需我的默认链接设置覆盖我的按钮类！ :)

【参考方案8】：

这里使用的是 jQuery。在http://jsfiddle.net/sQnSZ/查看它的实际应用

<button id="x">test</button>

$('#x').click(function()
    location.href='http://cnn.com'
)

【参考方案9】：

假设在你的 HTML 文件中有一个 id="Button" 的按钮，在 script.js（你的脚本文件）中，你可以这样使用：

document.getElementById("Button").addEventListener("click", gotoUrl);
    
function gotoUrl() 
       window.location.assign("https://www.google.com/");
    

现在该按钮会将您引导至 Google！

欲了解更多信息：https://www.w3schools.com/js/js_window_location.asp

【讨论】：

请解释一下代码的作用和它是怎么做的。

我在上一个回复中犯了一些错误。所以纠正了他们。如果还是不清楚，可以再问我。谢谢！