HTML按钮：导航到其他页面-不同的方法

有多种方法可以创建HTML按钮以导航到其他页面

方法1

<button id="btn_click">Click Me</button>
<script>
$('#btn_click').on('click', function() { window.location = 'http://www.google.com'; });
</script>

• 优点：代码最短，无需依赖JS
• 缺点：误用
  标签。如果有另一个提交按钮，则不工作

程序员，哪种方法最有效（因此被广泛使用），为什么

---

注意：我们可以将其作为社区wiki吗？

我创建了一个链接。链接就是链接。链接将导航到另一个页面。这就是链接的用途，每个人都理解这一点。所以方法3是我书中唯一正确的方法

我不希望我的链接看起来像一个按钮，当我这样做的时候，我仍然认为功能比外观更重要

按钮的可访问性较差，这不仅是因为需要Javascript，还因为针对视力受损者的工具可能无法很好地理解此Javascript增强的按钮

---

方法4也可以，但它更多的是一个技巧，而不是一个真正的功能。您滥用表单在另一页上发布“nothing”。它不干净。

我使用方法3，因为它对其他人来说是最容易理解的（每当你看到

标记时，你就知道它是一个链接），当你是团队的一员时，你必须做一些简单的事情；）

---

最后，我不认为简单地使用JS导航到另一个页面是有用和高效的。

然而，在基于web的系统中，让导航看起来像按钮是一种常见的做法，比如内容管理系统（CMS）@ShivanRaptor，但当你谈论页面时，我觉得它像一个网站，而不是一个web应用程序。在（专用）应用程序中，应用不同的规则，因为您为特定的用户群编写它们。网站应该适合每个人。不过，同样在CMS中，我更喜欢链接，也许还会添加一些CSS。这看起来像是很多代码，但是你只需要一次CSS，只需在链接中添加一个类，看起来像按钮。同意你的观点。CSS修饰的

标签在大多数情况下都是有效和适当的。同样在移动应用程序中，人们习惯于使用按钮。问题被改写。请重新考虑。我想我可能有一个答案

：）

<button onclick="window.location='http://www.google.com'">Click Me</button>

<a class="click-me" href="http://www.google.com">Click me</a>
<style>
.clickMe {
    -moz-appearance: button;
    -ms-appearance: button;
    -o-appearance: button;
    -webkit-appearance: button;
    appearance: button;
    text-decoration: none;
    color: #000;
    padding: 0.2em 0.4em;
}​
</style>

<form action="http://www.google.com">
<button>Click Me</button>
</form>