html - 「a href」リンクを「div」に追加するには?

Question

div に a href リンクを追加する方法を知る必要がありますか? 「buttonOne」div全体にhrefタグを配置しますか? それとも、「linkedinB」divの周りまたは内部にある必要がありますか?

ここに私のHTMLがあります：

<div id="buttonOne">
  <div id="linkedinB">
    <img src="img/linkedinB.png" width="40" height="40">
  </div>
</div>

Answer 1

aタグで囲めませんか？

  <a href="#"><div id="buttonOne">
        <div id="linkedinB">
            <img src="img/linkedinB.png" width="40" height="40">
        </div>
  </div></a>

Answer 2

これをjavascriptで実装してみてください：

<div id="mydiv" onclick="myhref('http://web.com');" >some stuff </div>
<script type="text/javascript">
    function myhref(web){
      window.location.href = web;}
</script>

Answer 3

この場合、2つの間にコンテンツがないため、問題ではありませんdiv。

どちらかがブラウザを下にスクロールさせます。

要素は次のaようになります。

<a href="mypageName.html#buttonOne">buttonOne</a>

または：

<a href="mypageName.html#linkedinB">linkedinB</a>

Answer 4

という名前のクラスを作成してoverlay、次の css を適用してみてください。

a.overlay { width: 100%; height:100%; position: absolute; }

配置された要素に配置されていることを確認してください。

<a>次に、リンク可能にしたい div 内にそのクラスのタグを配置するだけです。

<div id="buttonOne">
  <a class="overlay" href="......."></a>
    <div id="linkedinB">
       <img src="img/linkedinB.png" alt="never forget the alt tag" width="40" height="40"/>
    </div>
 </div>

divPhilipK の提案は機能するかもしれませんが、ブロック要素 ( ) をインライン要素 ( ) 内に配置できないため、検証されませんa。そして、あなたのウェブサイトが妥当性を確認していない場合、W3C Ninja があなたのためにやってきます!

別のアドバイスは、インライン スタイルを避けることです。

Answer 5

私は言います：

 <a href="#"id="buttonOne">
            <div id="linkedinB">
                <img src="img/linkedinB.png" width="40" height="40">
            </div>
      </div> 

ただし、リンクのままです。リンクをボタンに変更する場合は、#buttonone の名前を #buttonone a { your css here } に変更する必要があります。