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

当前位置：文江博客话题详情

有没有办法获得

按钮当前看起来像：

<button>Visit Page Now</button>

我希望不拥有什么：

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

该按钮未在表单中使用，因此不是选项。我只是好奇是否有一种方法可以链接此特定元素，而无需将其包装在 标记中。

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

原文

Just wondering if there is a way to get a HTML <button> element to link to a location without wrapping it in an <a href... tag?

Button currently looks like:

<button>Visit Page Now</button>

What I would prefer not to have:

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

The button is not being used within a form so <input type="button"> is not an option. I am just curious to see if there is a way to link this particular element without needing to wrap it in an <a href tag.

Looking forward to hearing some options/opinions.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

紙鸢 2024-10-24 16:50:01

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

Inline Javascript:

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

Defining a function in Javascript:

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

or in Jquery

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

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

回复收藏 0 原文

旧人哭 2024-10-24 16:50:01

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

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

技巧是用按钮自己的

标记包围按钮。

我个人更喜欢

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

Here's a solution which will work even when JavaScript is disabled:

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

The trick is to surround the button with its own <form> tag.

I personally prefer the <button> tag, but you can do it with <input> as well:

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

回复收藏 0 原文

绅刃 2024-10-24 16:50:01

就这么做吧

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

虽然我已经有一段时间没有接触 JavaScript 了 - 也许 location.href 已经过时了？无论如何，我就是这么做的。

Just do this

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

Although, it's been a while since I've touched JavaScript - maybe location.href is outdated? Anyways, that's how I would do it.

回复收藏 0 原文

软甜啾 2024-10-24 16:50:01

链接很棘手

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

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

简单的方法

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

回复收藏 0 原文

驱逐舰岛风号 2024-10-24 16:50:01

那么，对于链接来说，周围必须有一个链接标签。您还可以做的是为按钮创建一个 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>

Well, for a link, there must be a link tag around. what you can also do is that make a css class for the button and assign that class to the link tag. like,

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

回复收藏 0 原文

半岛未凉 2024-10-24 16:50:01

您可以将其设为非提交按钮 (

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

（实际上，忘记第二个解决方案 - 如果您不能使用表单，则提交按钮将消失）

回复收藏 0 原文

A君 2024-10-24 16:50:01

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

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

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

I just figured this out, and it links perfectly to another page without having my default link settings over ride my button classes! :)

回复收藏 0 原文

提笔落墨 2024-10-24 16:50:01

这里使用的是 jQuery。请访问 http://jsfiddle.net/sQnSZ/ 查看其实际情况

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

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

Here it is using jQuery. See it in action at http://jsfiddle.net/sQnSZ/

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

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

回复收藏 0 原文

恬淡成诗 2024-10-24 16:50:01

假设在您的 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

Assuming that in your HTML file you've a button with id="Button", In the script.js(your script file), you can use this way:

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

Now the button will lead you to Google!

For more info: https://www.w3schools.com/js/js_window_location.asp

回复收藏 0 原文