divをリンクに作ります

<div>変更したくない、派手なビジュアルコンテンツを含むブロックがあります。クリック可能なリンクにしたい。

私はのようなものを探していますが<a href="…"><div> … </div></a>、それは有効なXHTML 1.1です。

私のより良い解決策を見つけることを期待してここに来ましたが、ここで提供されているものは好きではありません。質問を誤解している方もいらっしゃると思います。OPは、コンテンツでいっぱいのdivをリンクのように動作させたいと考えています。これの1つの例はFacebook広告です-あなたが見れば、それらは実際には適切なマークアップです。

私にとってのno-nosは次のとおりです。javascript（リンクのためだけに必要ではなく、非常に悪いSEO /アクセシビリティ）。無効なHTML。

本質的にはこれです：

• 通常のCSS技術と有効なHTMLを使用してパネルを作成します。
• ユーザーがパネルをクリックした場合に、デフォルトのリンクにしたいリンクをどこかに配置します（他のリンクも使用できます）。
• そのリンクの内側に、空のスパンタグを挿入します（<span></span>ではなく、<span />ありがとう@Campey）。
• パネルの位置を与える：相対

• 空のスパンに次のCSSを適用します。

  { 
    position:absolute; 
    width:100%;
    height:100%;
    top:0;
    left: 0;
  
    z-index: 1;
  
    /* fixes overlap error in IE7/8, 
       make sure you have an empty gif */
    background-image: url('empty.gif');
  }   
  

  これでパネルが覆われ、<A>タグの中にあるので、クリック可能なリンクになります。

• パネルposition：relativeと適切なz-index（> 1）内の他のリンクを与えて、デフォルトのスパンリンクの前に配置します。

divリンク自体を作成することはできませんが、<a>タグの動作をblockと同じにすること<div>ができます。

a {
    display: block;
}

次に、その上に幅と高さを設定できます。

これは古代の質問ですが、私はここの誰もがいくつかのクレイジーなソリューションを持っているので、私はそれに答えると思いました。とてもシンプルです...

アンカータグはこのように機能します-

<a href="whatever you want"> EVERYTHING IN HERE TURNS INTO A LINK </a>

すごい...

<a href="whatever you want"> <div id="thediv" /> </a>

これが有効かどうかはわかりませんが。それが音声ソリューションの背後にある理由である場合、私は謝罪します...

少しjavascriptが必要です。しかし、あなたdivはクリック可能でしょう。

<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>

このオプションは、最も賛成された回答のようにempty.gifを必要としません：

HTML：

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

CSS：

 div.feature {
        position: relative;
    }

    div.feature a {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-decoration: none; /* No underlines on the link */
        z-index: 10; /* Places the link above everything else in the div */
        background-color: #FFF; /* Fix to make div clickable in IE */
        opacity: 0; /* Fix to make div clickable in IE */
        filter: alpha(opacity=1); /* Fix to make div clickable in IE */
    }

http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-using-css/で提案されているとおり

これは、目的を達成するための「有効な」ソリューションです。

<style type="text/css">
.myspan {
    display: block;
}
</style>
<a href="#"><span class="myspan">text</span></a>

しかし、最も可能性が高いのは、<a>タグをブロックレベルの要素として表示することです。

ハイパーリンクをシミュレートするためにJavaScriptを使用することはお勧めしません。これは、マークアップ検証の目的に反するためです。これは、最終的にはアクセシビリティを促進することです（適切なセマンティックルールに従って整形式のドキュメントを公開すると、同じドキュメントが異なるブラウザーで異なるように解釈される可能性が最小限になります）。

検証は行わないが、JavaScriptが無効になっているブラウザーを含め、すべてのブラウザーで適切にレンダリングおよび機能するWebページを公開することをお勧めします。さらに、を使用onclickしても、スクリーンリーダーがdivがリンクとして機能していると判断するためのセマンティック情報は提供されません。

最もクリーンな方法は、HTMLで導入されたデータタグでjQueryを使用することです。このソリューションを使用すると、必要なすべてのタグにリンクを作成できます。最初に、データリンクタグを使用してタグ（例：div）を定義します。

<div data-link="http://www.google.at/">Some content in the div which is arbitrary</div>

これで、好きなようにdivをスタイルできます。また、「リンク」のような動作のスタイルも作成する必要があります。

[data-link] {
  cursor: pointer;
}

そして最後に、このjQuery呼び出しをページに配置します。

$(document).ready(function() {
  $("[data-link]").click(function() {
    window.location.href = $(this).attr("data-link");
    return false;
  });
});

このコードを使用すると、jQueryは「data-link」属性を持つページ上のすべてのタグにクリックリスナーを適用し、data-link属性にあるURLにリダイレクトします。

これが有効かどうかはわかりませんが、うまくいきました。

コード ：

<div style='position:relative;background-color:#000000;width:600px;height:30px;border:solid;'>
  <p style='display:inline;color:#ffffff;float:left;'> Whatever </p>     
  <a style='position:absolute;top:0px;left:0px;width:100%;height:100%;display:inline;' href ='#'></a>
</div>

ピアの回答をIE 7以降で機能させるには、いくつかの調整が必要です。

1. 要素にbackground-colorがない場合、IEはz-indexを受け入れません。そのため、リンクは、コンテンツを含むcontainsig divの部分と重複せず、空白部分のみを重複させます。これを修正するために、背景が不透明度0で追加されます。

2. リンクアプローチでスパンを使用すると、何らかの理由でIE7とさまざまな互換モードが完全に失敗します。ただし、リンク自体にスタイルが指定されている場合は、問題なく機能します。

.blockLink  
{  
    position:absolute;  
    top:0;  
    left: 0;  
    width:100%;  
    height:100%;  
    z-index: 1;  
    background-color:#ffffff;   
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
    filter: alpha(opacity=0);  
    opacity:0;  
}

<div style="position:relative">  
    <some content>  
    <a href="somepage" class="blockLink" />  
<div>

アンカーをラップしてから、その高さと幅を親と同じになるように変更することもできます。これは完璧に機能します。

<div id="css_ID">
    <a href="http://www.your_link.com" style="display:block; height:100%; width:100%;"></a>
</div>

何故なの？use <a href="bla"> <div></div> </a>HTML5で正常に動作します

この投稿は古いですが、表示をブロックに設定して通常のリンクタグを記述するだけではIEでdiv全体がクリック可能にならないため、同じ問題を修正する必要がありました。したがって、この問題を修正するには、JQueryを使用する必要があるよりもはるかに簡単です。

まず、これが発生する理由を理解しましょう。IEは空のdivをクリック可能にせず、そのdiv / aタグ内のテキスト/画像をクリック可能にするだけです。

解決策：divを背景画像で埋め、ビューアから非表示にします。

どうやって？良い質問をして、今聞いてください。この背景スタイルをタグに追加します

> "background:url('some_small_image_path')
> -2000px -2000px no-repeat;"

これで、div全体がクリック可能になりました。これは私がフォトギャラリーに使用して、ユーザーが画像の半分をクリックして左/右に移動し、視覚効果のためだけに小さな画像を配置できるようにするための最良の方法でした。とにかく私は左と右の画像を背景画像として使用しました！

ブロックにリンクを挿入し、jqueryで拡張します。それは、JavaScriptを持たない人にとっては100％優雅に低下します。これをhtmlで行うことは、実際には最善の解決策ではありません。例えば：

<div id="div_link">
<h2><a href="mylink.htm">The Link and Headline</a></h2>
<p>Some more stuff and maybe another <a href="mylink.htm">link</a>.</p>
</div>

次に、jqueryを使用して（Webデザイナーの壁を介して）ブロックをクリック可能にします。

$(document).ready(function(){

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

});

次に、カーソルスタイルをdivに追加するだけです。

    #div_link:hover {cursor: pointer;}

おまけポイントとして、「js_enabled」クラスをdivや本文などに追加してJavaScriptが有効になっている場合にのみ、これらのスタイルを適用します。

この例は私にとってうまくいきました：

<div style="position: relative; width:191px; height:83px;">
    <a href="link.php" style="display:block; width:100%; height:100%;"></a>
</div>

これは私のために働きました：

HTML：

<div>

  WHATEVER YOU WANT

  <a href="YOUR LINK HERE">
    <span class="span-link"></span>
  </a>

</div>

CSS：

.span-link {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 9999;
}

これはあなたの全体のdivをカバーして目に見えない要素（スパン）を、追加して、あるの上のzインデックスにあなたの全体のdiv、そのためのdivの誰かがクリックすると、クリックは、基本的に、あなたの目に見えない「スパン」層によって遮られたときに、どのリンクされています。

注：他の要素にすでにz-indexを使用している場合は、このz-indexの値が、それを「上に」置きたいものよりも高いことを確認してください。

実際には現時点でJavaScriptコードを含める必要があります。このチュートリアルを確認してください。

ただし、CSSコードを使用してこれを実現するには、巧妙な方法があります。divタグ内にアンカータグをネストし、このプロパティをそれに適用する必要があります。

display:block;

これを実行すると、幅領域全体がクリック可能になります（ただし、アンカータグの高さの範囲内）。div領域全体をカバーする場合は、アンカータグの高さをdivタグ、例：

height:60px;

これで領域全体がクリック可能になり、text-indent:-9999pxアンカータグに適用して目標を達成できます。

これは本当にトリッキーでシンプルで、CSSコードを使用して作成されています。

ここに例があります：http : //jsfiddle.net/hbirjand/RG8wW/

これは、BBC WebサイトおよびGuardianで使用されているように、これを行うための最良の方法です。

私はここでテクニックを見つけました：http : //codepen.io/IschaGast/pen/Qjxpxo

HTMLをここに

<div class="highlight block-link">
      <h2>I am an example header</h2>
      <p><a href="pageone" class="block-link__overlay-link">This entire box</a> links somewhere, thanks to faux block links. I am some example text with a <a href="pagetwo">custom link</a> that sits within the block</p>

</div>

CSSはこちら

/**
 * Block Link
 *
 * A Faux block-level link. Used for when you need a block-level link with
 * clickable areas within it as directly nesting a tags breaks things.
 */


.block-link {
    position: relative;
}

.block-link a {
  position: relative;
  z-index: 1;
}

.block-link .block-link__overlay-link {
    position: static;
    &:before {
      bottom: 0;
      content: "";
      left: 0;
      overflow: hidden;
      position: absolute;
      right: 0;
      top: 0;
      white-space: nowrap;
      z-index: 0;
    }
    &:hover,
    &:focus {
      &:before {
        background: rgba(255,255,0, .2);
      }
    }
}

<a href="…" style="cursor: pointer;"><div> … </div></a>

私にとってこの作品：

<div onclick="location.href='page.html';"  style="cursor:pointer;">...</div>

次の方法であなたのdivへのリンクを与えることができます：

<div class="boxdiv" onClick="window.location.href='https://www.google.co.in/'">google</div>
<style type="text/css">
.boxdiv {
    cursor:pointer;
    width:200px;
    height:200px;
    background-color:#FF0000;
    color:#fff;
    text-align:center;
    font:13px/17px Arial, Helvetica, sans-serif;
    }
</style>

要素をhrefタグで囲むか、jqueryを使用して

$('').click(function(e){
e.preventDefault();
//DO SOMETHING
});

これが最も簡単な方法です。

これは、div私がクリック可能にしたいブロックです。

<div class="inner_headL"></div>

したがって、href次のようにを入れます。

<a href="#">
 <div class="inner_headL"></div>
</a>

divブロックを通常のHTML要素と見なして、通常のhrefタグを有効にします。
少なくともFFで動作します。

どんな状況でもこれを行うことはお勧めしませんが、DIVをリンクにするコードをいくつか示します（注：この例ではjQueryを使用し、特定のマークアップは簡単にするために削除されています）。

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
    $("div[href]").click(function () {
        window.location = $(this).attr("href");
    });
});

</script>
<div href="http://www.google.com">
     My Div Link
</div>

言及されていないオプションは、フレックスの使用です。タグに適用flex: 1することによりa、コンテナに合わせて拡張されます。

div {
  height: 100px;
  width: 100px;
  display: flex;
  border: 1px solid;
}

a {
  flex: 1;
}

<div>
  <a href="http://google.co.uk">Link</a>
</div>

リンクの一部の値は、ユーザーがどのレコードから来ているかによって変化するため、変数を取得しました。これはテストに役立ちました：

   <div onclick="location.href='page.html';"  style="cursor:pointer;">...</div> 

これも機能します：

   <div onclick="location.href='<%=Webpage%>';"  style="cursor:pointer;">...</div> 

私のスマーティーパンツの答え：

「回避的な回答：「ブロックレベル要素をハイパーリンクにしてXHTML 1.1で検証する方法」

HTML5 DOCTYPE DTDを使用してください。」

ie7には実際には当てはまりませんでした

onclick="location.href='page.html';"

IE7-9、Chrome、Safari、Firefox、

もしすべてがこのように単純であるなら...

#logo {background:url(../global_images/csg-4b15a4b83d966.png) no-repeat top left;background-position:0 -825px;float:left;height:48px;position:relative;width:112px}

#logo a {padding-top:48px; display:block;}



<div id="logo"><a href="../../index.html"></a></div>

ボックスの外側を少し考えてください;-)