web-dev-qa-db-ja.com

<a href ... タグでラップせずに、場所にリンクする <button>要素を取得する方法はありますか？

HTML <button>要素を取得して、<a href...タグでラップせずに場所にリンクする方法があるのではないかと考えていますか？

現在、ボタンは次のようになっています。

<button>Visit Page Now</button>

私が好むものnot

<a href="link.html"><button>Visit Page Now</button></a>

ボタンはフォーム内で使用されていないため、<input type="button">はオプションではありません。この特定の要素を<a hrefタグでラップすることなくリンクする方法があるかどうかを知りたいだけです。

いくつかのオプション/意見を聞くことを楽しみにしています。

javascripthtmlbuttonhyperlink
42
Dan

インラインJavascript：

<button onclick="window.location='http://www.example.com';">Visit Page Now</button>

JavaScriptで関数を定義する：

<script>
    function visitPage(){
        window.location='http://www.example.com';
    }
</script>
<button onclick="visitPage();">Visit Page Now</button>

またはJquery

<button id="some_id">Visit Page Now</button>

$('#some_id').click(function() {
  window.location='http://www.example.com';
});
67
aiham

JavaScriptが無効になっている場合でも機能するソリューションを次に示します。

<form action="login.html">
    <button type="submit">Login</button>
</form>

秘Theは、ボタンを独自の<form>タグで囲むことです。

個人的には<button>タグを好みますが、<input>でも同様にできます：

<form action="login.html">
    <input type="submit" value="Login"/>
</form>
21
Pacerier

これをやるだけ

<button OnClick=" location.href='link.html' ">Visit Page Now</button>

ただし、JavaScriptに触れてからしばらく経ちました-location.hrefは古いのでしょうか？とにかく、それは私がそれをする方法です。

6
Ken Wayne VanderLinde

リンクについては、リンクタグが必要です。また、ボタンのCSSクラスを作成し、そのクラスをリンクタグに割り当てることもできます。好む、

CSS

#btn{ background:url(images/button.jpg) no-repeat 0 0; display:block; width:50px; height:20px; border:none; outline:none;}

HTML

<a href="btnlink.html" id="btn"></a>
6
themajiks

それを非送信ボタン（<button type="button">）にして、window.location = 'http://where.you.want/to/go'のようなものをonclickハンドラーにフックできます。ただし、javascriptを有効にしないと機能しません。

または、それを送信ボタンにしてサーバーでリダイレクトを行うことができますが、これには明らかに何らかのサーバー側のロジックが必要ですが、利点はjavascriptを必要としないことです。

（実際には、2番目の解決策を忘れてください-フォームを使用できない場合、送信ボタンは無効です）

5
tdammers

リンクはトリッキーです

<a href>がデフォルトで知っているトリックを考慮してください。ただし、javascriptリンクは役に立ちません。まともなウェブサイトでは、リンクとして動作したいものは何でもこれらの機能を何らかの方法で実装する必要があります。すなわち：

  • Ctrl +クリック：新しいタブでリンクを開きます
    position/size引数なしでwindow.open（）を使用すると、これをシミュレートできます
  • Shift +クリック：リンクを新しいウィンドウで開きます
    window.open（）でサイズや位置を指定してこれをシミュレートできます
  • Alt + Click：ダウンロードターゲット
    これを使用することはほとんどありませんが、シミュレートすることを主張する場合は、適切なダウンロードヘッダーで応答する特別なスクリプトをサーバー側で記述する必要があります。

簡単な方法

ここで、すべての動作をシミュレートしたくない場合は、<a href>を使用し、ボタンのスタイルをlikeにすることをお勧めします。ホバー効果。 「ボタンと他に何もない」だけが意味的に重要でない場合、<a href>がサムライのやり方だと思います。また、セマンティクスと読みやすさを心配する場合は、ドキュメントがready（）になったときにボタン要素を置き換えることもできます。それは明確で安全です。

4
dkellner

<form action="portfolio.html"> <button type="link" class="btn btn-primary btn-lg">View Work</button> </form>

私はこれを理解したばかりで、デフォルトのリンク設定をボタンクラスに上書きせずに、別のページに完全にリンクしています！ :)

2
Loni Negron

ここでは、jQueryを使用しています。 http://jsfiddle.net/sQnSZ/ で実際の動作をご覧ください

<button id="x">test</button>

$('#x').click(function(){
    location.href='http://cnn.com'
})
1
Hussein