HTML中可以做一些没有javascript的东西吗？

Posted 2021-04-10

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

答案

使用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 Fiddle demo。

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

参考文献：

• appearance (albeit it's the -moz- prefixed MDN documentation)。
• appearance property, at the W3C。
• Unfortunately-dropped CSS3 features (at the W3C)。

另一答案

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

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

另一答案

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

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

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