5

訪問者がボタン要素をクリックしたときに、URL を変更するにはどうすればよいですか?

例：

<form id="search">
  <input type="text" />
  <button onclick="javascript:alert('hi');">Alert Hi</button>
  <button onclick="javascript:window.location.href='http://www.google.com/'">Go to Google</button>
</form>

(または JSFiddle を参照してください。)

簡単なデモ ページの場合、訪問者がボタンをクリックしたときに新しい URL に移動する必要があります。JavaScript の onclick (Alert Hi ボタン) を実行できますwindow.location.href='http://www.google.com/'。Firebug のコンソールから実行すると、URL が変更されます。ボタンのクリック時に URL を変更するにはどうすればよいですか?

4

2 に答える 2

17

問題は、ボタンをクリックしたときにフォームが送信されていることです。type="button"フォームを送信しないように追加します。属性も必要javascriptありません。ボタンがフォームを送信できないようにする方法をonclick参照してください。

例http://jsfiddle.net/E7UEe/1/ jsfiddle が許可していないため、google.com にはアクセスしないことに注意してください。エラーメッセージに注意してくださいRefused to display document because display forbidden by X-Frame-Options.

<form id="search">
  <input type="text" />
  <button onclick="javascript:alert('hi');">Alert Hi</button>
  <button type="button" onclick="window.location.href='http://www.google.com/'">Go to Google</button>
</form>​

JS なしで機能する代替手段は、appearance:button CSS ディレクティブ http://jsfiddle.net/d6gWA/です。

<a class="btn"> Link looking like button</a>​
.btn {
    appearance: button;
    -moz-appearance: button;
    -webkit-appearance: button;
    -ms-appearance: button;
}​

または、いつでもリンクhttp://jsfiddle.net/d6gWA/2/にボタンを配置できます

<a class="btn" href="http://www.google.com" target="_blank"><button type="button">Link Button</button></a>​
于 2012-11-16T23:25:39.397 に答える
-1 
 <button onclick="javascript:window.location='http://www.google.com/'">Go to Google</button>

.href を削除するだけで動作します

于 2012-11-16T23:20:38.397 に答える