<button> HTML 中的 a 可以在没有 javascript 的情况下做一些事情吗？

Question

>我有一个带有按钮的网页。目前，我正在将此按钮绑定到javascript处理程序，该处理程序使页面在单击时重定向到给定的URL。

.HTML：

<button class="click-me">Clike me to navigate</button>

.JS：

$('.click-me').on('click', function() { window.location = '/myloc'; });

我现在正在尝试构建此页面的回退（无javascript）版本。我希望这个按钮做同样的工作，但不使用 javascript。换句话说，即使浏览器的javascript被禁用，我也试图使这个按钮起作用。

我知道这可以通过形式来实现（如下所示）。但我正在寻找任何更干净的实施。

<form name="hack" action="/myloc">
  <button type="submit" class="click-me">Click me to navigate</button>
</form>

Answer 1

使用a元素，这就是它们的用途：

<a class="click-me" href="/path/to/whatever/page">Click me to navigate</a>

然后简单地将其样式设置为button.

例如，使用以下 CSS：

.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;
}​

JS小提琴演示。

（显然，这假定使用支持appearance（或供应商前缀版本）CSS属性的浏览器。

引用：

• appearance（尽管它是-moz-前缀的 MDN 文档）。
• appearance财产，在W3C。
• 不幸的是，CSS3功能（在W3C上）被删除。

Answer 2

为了回答标题中提出的问题，是的，button元素可以在没有JavaScript的情况下"做事"。使用 type=submit ，它提交一个表单，如问题末尾的示例所示。使用 type=reset ，它会从表单中清除所有用户输入。它只是依赖于JavaScript的type=button（元素处于任何形式之外时的默认值），并且没有脚本就不做任何事情。

要回答你应该问的问题：使用链接，卢克。如果需要，您可以设置链接外观非常像按钮的样式（在类似应用程序的上下文中可能有意义），即使仅使用 CSS 2.1 以及可选的 CSS3 增强功能（如圆角）。

Answer 3

您可以通过在按钮单击之前添加<a>标签来简单地添加按钮单击的实现（如果它引用任何网页）。例如：

<a href="https://www.youtube.com/">
    <button>Youtube</button>
</a>

据我所知，这不需要任何JavaScript。