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

Question

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

Button目前看起来像:

<button>Visit Page Now</button>

我不希望有什么:

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

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

期待听到一些选择/意见.

Answer 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';
});

Answer 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>

Answer 3

就这样做吧

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

虽然,自从我触及JavaScript以来已经有一段时间了 - 可能location.href已经过时了？无论如何,我就是这样做的.

Answer 4

好吧,对于链接,必须有一个链接标记.您还可以做的是为按钮创建一个css类,并将该类分配给链接标记.喜欢,

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;
}

HTML

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

Answer 5

链接很棘手

考虑默认情况下 <a href> 知道但 javascript 链接不会为您做的技巧。在一个像样的网站上，任何想要充当链接的东西都应该以某种方式实现这些功能。即：

• Ctrl+单击：在新选项卡中打开链接
  您可以使用不带位置/大小参数的 window.open() 来模拟这一点
• Shift+单击：在新窗口中打开链接
  您可以通过指定大小和/或位置的 window.open() 模拟此操作
• Alt+Click: 下载目标
  人们很少使用这个，但如果你坚持模拟它，你需要在服务器端编写一个特殊的脚本来响应正确的下载标头。
  
  

简单的办法

现在，如果你不想模仿所有的行为，我建议使用<a HREF>和风格它像一个按钮，因为按钮本身是一个大致的形状和悬停效果。我认为如果只有“按钮而没有别的”在语义上并不重要，<a href> 是武士的方式。如果您担心语义和可读性，您还可以在文档就绪时替换按钮元素（）。这是清晰和安全的。

Answer 6

您可以将其设置为非提交按钮(<button type="button">)并将其挂钩window.location = 'http://where.you.want/to/go'到其onclick处理程序中.如果没有启用JavaScript,这不起作用.

或者你可以把它作为一个提交按钮,并在服务器上进行重定向,虽然这显然需要某种服务器端逻辑,但好处是不需要javascript.

(实际上,忘记第二个解决方案 - 如果你不能使用表单,提交按钮就会出来)