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=buttonJavaScriptに依存し、スクリプトなしでは何も実行しないのは（要素がフォームの外にある場合のデフォルト）だけです。

あなたが尋ねるべきだった質問に答えるために：リンクを使ってください、ルーク。必要に応じて、CSS 2.1に加えて、角を丸くするなどのオプションのCSS3拡張機能を使用する場合でも、必要に応じてリンクのスタイルをボタンのように設定できます（アプリケーションのようなコンテキストでは意味があります）。

于 2012-11-12T18:38:10.910 に答える
1

<a>ボタンクリックの実装を追加するには（Webページを参照している場合）、その前にタグを追加します。例えば：

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

私の知る限り、これにはJavaScriptは必要ありません。

于 2017-08-16T14:58:20.523 に答える