Question

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

方法1

<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

方法2

<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

方法4

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

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

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

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

Answer 1

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

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

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

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

Answer 2

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

最后我认为使用JS只是为了导航到另一个页面是没有用的。

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

2 个答案: