15

有多种方法可以创建 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

方法三

<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 属性）
  • 注意：这是从这里

方法四

<form action="http://www.google.com">
<button>Click Me</button>
</form>
  • 优点：代码最短，无需依赖JS
  • 缺点：<form>标签的误用。如果有另一个提交按钮则不起作用

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

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

4

2 回答 2

5

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

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

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

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

于 2013-07-10T08:09:53.513 回答
2

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

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

于 2013-07-10T08:10:36.017 回答