Javascript/JQueryを使用して `<a> 'を置き換える適切な方法は何ですか？

Question

Javascriptを使用してHTML要素をクリック可能にしたいと考えています。

<div class="link"> 
<a href="http://example.com"> 
</div> 

<script> 
$('.link').click(function(){ 
    if(link=$(this).find('a').attr('href')) 
    window.location.href=link; 
}); 
</script> 

これは動作しますが、これを行うには良い方法がある場合、私は思ったんだけど：ここに私が持っているものです。ありがとう！

Answer 1

例は機能しますが、それは意味的でもクリーンでもありません。あなたはdivを右クリックして新しい場所にコピーするか、または新しいタブで開くことはできません。また中央をクリックすることもできません。アンダーをdisplay: blockに設定してdivのように振る舞うことは何もありません。aタグそのもの。これが意味する方法です。ブラウザがリンクのネイティブ関数を処理できるようにします。 HTML5がOKであれば

Answer 2

htmlを変更できる場合は、divをaに変更するだけです。その後、div：div：ブロックのようなブロック要素になるように「display：block」を作成できます。

Answer 3

あなたはこのような何かを行うことができます。

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.link').click(function(e){ 
     window.location.href = $(this).data('link'); 
    }); 
}); 
</script> 
<div class="link" data-link="http://example.com">My Link</div> 

Answer 4

また<a href="#">Div goes here</a>すなわちanchorタグでdivをラップすることができます。このようにして、あなたは欲しいものを手に入れます。より多くのスタイリングとJavaScriptが必要です:)

Answer 5

Starting with HTML5あなたのアンカータグ内にフローコンテンツをラップすることができます。

<a href="http://example.com/"> 
    <div class="special"> 
    <img src="http://example.com/news.jpg" alt="Great Picture" /> 
    <p>Great News! This whole section is clickable!</p> 
    </div> 
</a> 

これは不格好なJavaScriptコードを使用せずに必要な機能を可能にし、ブラウザのジェスチャー（新しいタブの真ん中クリック）を破壊しません。

いくつかのルールは、しかし、HTML5の標準に固執するために適用されます。

• あなた<a>の親タグがフローコンテンツのために許可する必要があります。 HTML5のアンカータグには透過というコンテンツモデルがあります。つまり、そのモデルの親モデルが採用されています。

• アンカータグ内にインタラクティブなコンテンツ（ボタンやその他のリンクなど）を置くことはできません。

これは、Internet Explorer 6を含むすべてのブラウザで動作することに注意してくださいしかし、あなたが希望する結果に応じて、blockまたはinline-blockのいずれかにご<a>タグのdisplayスタイルを設定してください。