可以在＆LT;按钮和GT;在HTML离不开JavaScript的东西吗？ [英] Can a <button> in HTML do something without javascript?

问题描述

我有一个网页，有一个按钮。目前，我绑定此按钮将JavaScript处理，使页面重定向到一个给定的URL被点击时它。

HTML

 ＆LT;按钮类=点击我＆GT;类C我导航＆LT; /按钮＆GT;
 

JS：

  $（'点击我'）上（'点击'，功能（）{了window.location ='/ myloc';}）;
 

我现在正在试图建立这个网页的回退（无JavaScript的）版本。我想这个按钮做同样的工作，但不使用JavaScript。换句话说，我试图让这个按钮，即使浏览器中禁用JavaScript功能。

我知道这可以通过表格来实现（如下图所示）。但是我正在寻找任何清洁剂的实现。

 ＆LT;表格名称=黑客行动=/ myloc＆GT;
  ＆LT;按钮式=提交级=点击我＆gt;点击我的导航＆LT; /按钮＆GT;
＆LT; /表及GT;
 

解决方案

使用的 A 元素，这就是他们的为的

 ＆LT;一类=点击我的href =/路径/到/不管/页＆GT;类C我导航＆LT; / A＆GT;
 

，然后简单地风格的它作为一个按钮。

例如用下面的CSS：

  .clickMe {
    -moz-外观：按钮;
    -ms-外观：按钮;
    -o-外观：按钮;
    -webkit-外观：按钮;
    外观：按钮;
    文字修饰：无;
    颜色：＃000;
    填充：0.2em 0.4em;
}
 

JS提琴演示。

（显然，这个假定支持外观使用浏览器（或于供应商prefixed版本）的CSS属性。）

参考文献：

• 外观（尽管它的 -moz - prefixed MDN文档）


• 外观属性，在W3C 。


• 不幸掉线CSS3特性（在W3C）。

I have a web page that has a button. Currently I am binding this button to a javascript handler that makes the page redirect to a given URL when it is clicked.

HTML:

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

JS:

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

I am now trying to build a fallback (no-javascript) version of this page. I would like this button to do the same job but without using javascript. In other words, I am trying to make this button functional even if javascript of the browser is disabled.

I know this can be achieved by form (as shown below). But I am looking for any cleaner implementation.

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

解决方案

Use an a element, that's what they're for:

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

And then simply style it as a button.

For example with the following 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.

(Obviously this assumes the use of a browser that supports the appearance (or vendor-prefixed versions) CSS property.)

References:

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

这篇关于可以在＆LT;按钮和GT;在HTML离不开JavaScript的东西吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！