web-dev-qa-db-ja.com

Divをリンクにする

私は<div>ブロックを持っています。クリック可能なリンクにしたいです。

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

csshtmlxhtmlanchor
518
EE.

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

私にとってのno-noは次のとおりです。javascript（リンク、および非常に悪いSEO /アクセシビリティのためだけに必要とされるべきではありません）。無効なHTMLです。

本質的にはこれです：

  • 通常のCSS技術と有効なHTMLを使用してパネルを構築してください。
  • ユーザーがパネルをクリックした場合にデフォルトのリンクにしたいリンクをそこのどこかに置きます（他のリンクもあります）。
  • そのリンクの中に、空のspanタグを入れてください（<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>タグの内側にあるのでクリック可能なリンクになります

  • パネル位置の内側に他のリンクがあればそれを与えます。それらをデフォルトのスパンリンクの前に持ってくるための相対的で適切なz-index（> 1）
715
thepeer

divをリ​​ンク自体にすることはできませんが、<a>タグをblockとして機能させることはできます。これは<div>と同じ動作です。

a {
    display: block;
}

その後、幅と高さを設定できます。

246
Soviut

これは古くからの質問ですが、ここにいるすべての人がいくつかの狂った解決策を持っているので、私はそれに答えたいと思いました。それは実際には非常に単純です...

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

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

すっ...

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

これが有効かどうかはわかりませんが。それが音声による解決策の背後にある推論であるならば、私は謝罪します...

64
Zizo47

少しジャバスクリプトが必要です。しかし、あなたのdivはクリック可能です。

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

このオプションは、最も支持されている答えのように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/ で提案されているように

35
MagTun

これはあなたが望むものを達成するための「有効な」解決策です。

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

しかし、おそらくあなたが本当に欲しいのは、<a>タグをブロックレベルの要素として表示することです。

JavaScriptを使用してハイパーリンクをシミュレートすることは、最終的にはアクセシビリティを向上させることを目的としたマークアップ検証の目的を無効にするためです。

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

23
Calvin

これが有効であるかどうかわからないがそれは私のために働いた。

コード ：

<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>
13
Tim

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

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

今、あなたはあなたが望むdivをスタイルすることができます。そして、 "link"のような振る舞いのスタイルも作成しなければなりません。

CSS:
-------------
[data-link] {
    cursor: pointer;
}

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

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

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

11
Erhard Dinhobl

ピアの答えを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>
9
Thomas Scheelhardt

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

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

何故なの？ use <a href="bla"> <div></div> </a>はHTML5でうまく動きます

4
Vamsi Pavan Mahesh

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

最初にこれが起こる理由を理解させてください：IE空のdivをクリック可能にしないでくださいそれはそのdiv /タグ内のテキスト/画像をクリック可能にするだけです。

解決策：divをbakground画像で埋め、ビューアから隠します。

どうやって？あなたは良い質問をします、今聞いてください。このbackroundスタイルをaタグに追加します

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

そしてそこにあなたはそれを持っています全体のdivは今クリック可能です。これは私がImを私のフォトギャラリーに使用させて、画像の半分をクリックして左右に動かし、そして視覚効果のためだけに小さい画像を配置させるための最良の方法でした。とにかく私は左と右の画像を背景画像として使用しました。

3
Drake

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

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

リンクをブロックに入れて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を使ってブロックをクリック可能にします（ ウェブデザイナーウォール 経由）：

$(document).ready(function(){

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

});

それなら、divにカーソルスタイルを追加するだけです。

    #div_link:hover {cursor: pointer;}

Javascriptがdiv、body、またはその他に 'js_enabled'クラスを追加することで有効になっている場合にのみ、ボーナスポイントとしてこれらのスタイルを適用します。

2
Justin

これは私のために働いた：

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全体をカバーする見えない要素（span）を追加し、z-index上で above あなたのdiv全体なので、誰かがそのdivをクリックすると、クリックは本質的にあなたの不可視によって傍受されますリンクされている「スパン」層。

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

1
Jeff Schwarting

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

しかしCSSコードを使用してこれを達成するためのトリッキーな方法があります。あなたはdivタグの中にアンカータグを入れ子にしなければなりません、そしてあなたはそれにこのプロパティを適用しなければなりません、

display:block;

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

height:60px;

これは全領域をクリック可能にするつもりです、そしてあなたはゴールを達成するためにアンカータグにtext-indent:-9999pxを適用することができます。

これは本当にトリッキーで簡単です、そしてそれはちょうどCSSコードを使用して作成されます。

これが の例です ： http://jsfiddle.net/hbirjand/RG8wW/

1
Hbirjand
<a href="…" style="cursor: pointer;"><div> … </div></a>
1
Phillip Chaffee

要素をhrefタグで囲むことも、jqueryを使用して使用することもできます。

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

どのような状況下でもこれを行うことはお勧めしませんが、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>

もう一度、私はこれをしないでしょう。だから私を投票しないでください。私は単に質問に答えようとしているだけです。

0
Brian David Berman

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

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

hERESに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をHERES

/**
 * 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);
      }
    }
}
0
jojojohn

次の方法であなたの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>
0
Swarnamayee Mallia

これは私のために働く：

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

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

たとえば、これがクリック可能にしたいdivブロックです。

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

それで以下のようにhrefを置きます：

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

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

0
jeevanism