web-dev-qa-db-ja.com

divタグをリンクにするにはどうすればよいですか

どのようにしてdivタグをリンクにしますか。 div全体をクリックできるようにしたいと思います。

htmlanchor
14
Alan

JS：

<div onclick="location.href='url'">content</div>

jQuery：

$("div").click(function(){
   window.location=$(this).find("a").attr("href"); return false;
});

これらのDIVには必ずcursor:pointerを使用してください

15
3zzy

Div内にアンカータグを設定する必要がある場合は、CSSを使用して、display：blockを介してdivを埋めるためにアンカーを設定することもできます。

など：

<div style="height: 80px"><a href="#" style="display: block">Text</a></div>

ユーザーがそのdivでカーソルをフロートすると、アンカータグがdivを埋めます。

11
Justin Yost

this other の質問で指摘されているように、HTML5を使用している場合、divをaの中に入れることができます。

<a href="http://www.google.com"><div>Some content here</div></a>

このメソッドは、すべてのコンテンツがクリック可能であり、どこを指しているのかを構造内で明確にするため、優先します。

10
Rael Gugelmin Cunha
8
zzzzBov

それをしないでください。

  • リンクが必要な場合は、適切な<A>NCHOR</a>でコンテンツをラップします。
  • <DIV>をリンクに変換する場合は、「Javascript」を使用して<DIV>を<A>NCHOR</A>内にラップします
  • <DIV>をクリックしたときに何らかのアクションを実行する場合は、onclickイベントハンドラーを使用します。「リンク」とは呼ばないでください。
7
chakrit
<div style="cursor:pointer" onclick="document.location='http://www.google.com'">Content Goes Here</div>
5
Ryan Michela
<div style="cursor:pointer;" onclick="document.location='http://www.google.com'">Foo</div>
2
Rob

Onclick = "window.location = 'TARGET URL'"を追加し、スタイルを "cursor：pointer"に設定することにより、DIV関数全体をリンクとして作成できます。しかし、検索エンジンは結果のリンクをたどることができず、読者はタブで開くこともリンクの場所をコピーすることもできないなどの理由で、これを行うのはよくない考えです。代わりに、通常のアンカータグを作成できますそして、そのスタイルをdisplay：blockに設定し、DIVのようにスタイルします。

2
Ben Regenspan

Javascriptを使用してこの効果を実現できます。フレームワークを使用すると、この種のことは非常に簡単になります。 jQuery の例を次に示します。

$('div#id').click(function (e) {
  // Do whatever you want
});

このソリューションには、マークアップにロジックを保持しないという明確な利点があります。

2
plainprogrammer

検索スパイダーはJSコードのインデックスを作成しないことに注意してください。したがって、URLをJSコード内に配置する場合は、ページの別の場所にある従来のHTMLリンクにもURLを含めるようにしてください。つまり、リンクされたページをGoogleなどによってインデックス化する場合です。

0
sifr4