12

我有一个带有按钮的网页。目前我正在将此按钮绑定到一个 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>
4

3 回答 3

17

使用一个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 属性的浏览器。）

参考：

于 2012-11-12T17:37:38.757 回答
6

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

回答你应该问的问题：使用链接，卢克。如果你愿意的话，你可以设置一个链接看起来很像一个按钮的样式（在类似应用程序的上下文中可能有意义），即使只使用 CSS 2.1 加上可选的 CSS3 增强功能，如圆角。

于 2012-11-12T18:38:10.910 回答
1

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

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

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

于 2017-08-16T14:58:20.523 回答