web-dev-qa-db-ja.com

HTML-DIV全体をハイパーリンクにする方法

DIV全体をクリック可能なハイパーリンクにする方法を教えてください。意味、私は本質的にやりたい：

<div class="myclass" href="example.com">
    <div>...</div>
    <table><tr>..</tr></table>
    ....
</div>

そして、誰かがマウスをmyclass DIVに合わせると、DIV全体がクリック可能なハイパーリンクになります。

htmlxhtmlhyperlink
68
Teddyk

JavaScriptのonclickをdivに追加できます。

<div onclick="location.href='newurl.html';">&nbsp;</div>

編集：新しいウィンドウ用

<div onclick="window.open('newurl.html','mywindow');" style="cursor: pointer;">&nbsp;</div>
117
Joel Etherton

<a>内に<div>要素を配置し、display: blockおよびheight: 100%に設定できます。

23
SLaks

ポインターが標準になったため、カーソルを手ではなくポインターとして指定する必要があります。そのため、ここにページコードの例を示します。

<div onclick="location.href='portable-display-stands.html';" id="smallbox">The content of the div here</div>

cSSの例：

#smallbox {
    cursor: pointer;
}

Divは 'onclick'を使用したクリック可能な要素になり、CSS ... job doneでハンドカーソルを偽造しました。

13
Nick Annies

これは遅い回答ですが、この質問は検索結果に頻繁に表示されるため、適切に回答する価値があります。

基本的に、divをクリック可能にするのではなく、<a>タグにdisplay: block CSS属性を与えることで、アンカーdivのようにする必要があります。

そのようにして、HTMLは意味的に有効なままであり、ハイパーリンクの一般的なブラウザーの動作を継承できます。 JavaScriptが無効になっている場合でも動作します。jsリソースはロードされません。

10
Jimmy Breck-McKye

onclickをDIVタグに追加します。

http://webdevjunk.com/coding/javascript/3/use-onclick-to-make-entire-div-or-other-html-object-into-a-link/

7
Keith Adler

なぜあなたはこれをしないのですか

<a href="yoururl.html"><div>...</div></a>

これで問題なく動作し、「クリック可能なアイテム」カーソルの変更を促すプロンプトが表示されますが、前述のソリューションでは変更できません。

3
cfg

代替手段は、javascriptとonclickイベントを介した転送です

<div onclick="window.location.href='somewhere...';">...</div>
0
tDo