Question

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

按钮目前看起来像：

<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(images/button.jpg) no-repeat 0 0; display:block; width:50px; height:20px; border:none; outline:none;}

HTML

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

Answer 5

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

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

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

Answer 6

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

我刚想出来了，它完全链接到另一个页面而没有我的默认链接设置超过我的按钮类！：）

Answer 7

只是旁注 - 您可能需要考虑＆lt; a href＆gt;的技巧默认情况下知道，但javascript链接不会为你做。即：

如果您使用Ctrl单击，则会打开一个新选项卡;
如果您使用Shift单击，浏览器将在新窗口中打开链接;
如果您点击Alt，它就是＆＃34;下载目标＆＃34;命令。

现在，如果你不想模拟所有这些行为，我建议使用＆lt; a href＆gt;并将它设置为喜欢一个按钮，因为按钮本身大致是一个形状和一个悬停效果。我认为如果仅仅拥有＆＃34;按钮而没有别的＆＃34;，＆lt; a href＆gt;是武士的方式。如果您担心语义和可读性，您还可以在文档准备就绪时替换button元素（）。它清晰而安全。

Answer 8

这里使用的是jQuery。请参阅http://jsfiddle.net/sQnSZ/

中的实际操作

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

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

Answer 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

有没有办法让<button>元素链接到一个位置而不将其包装在</button>中

9 个答案: