HTML 按钮：导航到其他页面 - 不同的方法 [关闭]答案

【问题标题】：HTML Button : Navigate to Other Page - Different Approaches [closed]HTML 按钮：导航到其他页面 - 不同的方法 [关闭]
【发布时间】：2013-07-10 08:04:37
【问题描述】：

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

方法一

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

优点：将 JS 与 HTML 分离（MVC）
缺点：代码长，依赖JS
注意：jQuery 选择器是可选的，可以使用传统的 JavaScript

方法二

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

优点：1-liner，无需为按钮分配 ID
缺点：JS和HTML混合，依赖JS

方法3

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

优点：无需依赖JS
缺点：看起来像假按钮，需要 IE9+（appearance 是 CSS3 属性）
注意：这是来自here

方法四

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

优点：代码最短，无需依赖JS
缺点：滥用<form> 标签。如果有另一个提交按钮则不起作用

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

注意：我们可以把它做成社区 wiki 吗？

【问题讨论】：

问题已改写。请重新考虑。我想我可能会有答案:)

标签： html button

【解决方案1】：

我做一个链接。一个链接就是一个链接。链接导航到另一个页面。这就是链接的用途，每个人都明白这一点。所以方法3是我书中唯一正确的方法。

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

按钮不太容易访问，不仅是因为需要 Javascript，还因为视障者的工具可能无法很好地理解这个 Javascript 增强按钮。

方法 4 也可以，但它更像是一种技巧而不是真正的功能。您滥用表格将“无”发布到此其他页面。不干净。

【讨论】：

但是，在基于 Web 的系统（例如内容管理系统 (CMS)）中，使导航看起来像按钮是一种常见的做法
@ShivanRaptor 也许，但是当您谈论页面时，我觉得它就像一个站点，而不是一个 Web 应用程序。在（专门的）应用程序中，应用不同的规则，因为您为特定的用户群编写它们。网站应该适合所有人。不过，同样在 CMS 中，我更喜欢链接，并且可能添加一些 CSS。看起来代码很多，但您只需要一次 CSS，然后只需将一个类添加到需要看起来像按钮的链接。
同意你的看法。在大多数情况下，CSS 装饰的<a> 标签是有效且足够的。
在移动应用中，人们也习惯了按钮。

【解决方案2】：

我使用方法 3 是因为它对其他人来说最容易理解（每当您看到 <a> 标签时，您就知道这是一个链接），当您是团队的一员时，您必须做一些简单的事情；）。

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

【讨论】：