22

画像と一部のテキストを含むdivをリンクにしたいと思います。div内の任意の場所（必ずしも画像やテキストである必要はありません）をクリックして、1つの場所に移動できるようにします。ただし、テキストの最後に、ユーザーを別の場所に移動させる別のリンクも含めたいと思います。ただし、この2番目のリンクを追加すると、div全体がリンクではなくなり、画像とテキストだけがリンクになります。私がやりたいことは可能ですか？

4

4 に答える 4

37

a要素内の要素は許可されていないため、HTMLではa使用できません。div既存のHTML仕様では、たとえば内部に含めることはできませんがa、この制限がブラウザによって実際に強制されることはなく、HTML5ドラフトで解除されました。ネストされたa要素は、アクティブ内にアクティブ領域を作成し、その意味を定義する必要があり、混乱を招くため、別の問題です。

使用すると実際に何が起こるか

<a href=foo>bla bla <a href=bar>inner link</a> stuff</a>

a内側の要素の後の外側の要素のコンテンツaがまったくリンクではないことを除いて、それはあなたが望むように機能するということです。どうやらブラウザはこのような構造を処理する準備ができていません。事実上、要素が開いているときにタグ</a>に遭遇すると、それらは終了タグを意味します。要素の場合と同じように。<a>ap

したがって、リンクの最後にある内部リンクは、ある意味で機能します。もちろん、将来のバージョンのブラウザで動作し続けること、またはすべてのブラウザで動作することを保証するものではありません。

ネストされていない2つの別個のa要素を連続して使用し、CSSポジショニングを使用して、2番目の要素を最初の要素の内側に視覚的に配置できます。しかし、これはやや複雑になります。より簡単なアプローチは、JavaScriptの疑似リンクを設定することです。

<span onclick="document.location.href = 'foo'; return false">inner link</span>

欠点は、JavaScriptが無効になっている場合、リンクのように機能せず、検索エンジンもそれをリンクとして扱わないことです。

于 2012-11-18T06:59:26.267 に答える
8

絶対位置と相対位置を使用して、JavaScriptなしでこれを行う方法があります。これにより、JavaScriptが苦労しているSEOのコードセマンティックも維持されます。 

 .outside-container {
      width: 900px;
      margin: 0 auto;
      position: relative;
      background: #888;
      padding: 5px;
    }
 
    .overlay {
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0; bottom: 0; right: 0; left: 0;
      background: white;
      opacity: 0;
    }
    
    .overlay:hover {
      opacity: .2;
    }
    
    .text-box {
      position: absolute;
      top: 5px; right: 5px;
      width: 30%;
      color: white;
      font: georgia, serif 700 14px;
    }
    
    .image-box {
      width: 68%;
    }
<div class = "outside-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bc/George_Berkeley_by_Jonh_Smibert.jpg" alt="george_wiki" class = "image-box">
         <a class = "overlay" href = "#div"></a>
         <div class = "text-box">
           I was considering the odd fate of those men who have in all ages, through an affectation of being distinguished from the vulgar, or some unaccountable turn of thought, pretended either to believe nothing at all, or to believe the most extravagant things in the world. This however might be borne, if their paradoxes and scepticism did not draw after them some consequences of general disadvantage to mankind. But the mischief lieth here; that when men of less leisure see them who are supposed to have spent their whole time in the pursuits of knowledge professing an entire ignorance of all things, or advancing such notions as are repugnant to plain and commonly received principles, they will be tempted to entertain suspicions concerning the most important truths, which they had hitherto held sacred and <a href = "#text">unquestionable.</a>
         </div>
       </div>

当然、これを考えたのは私だけだと思いましたが、以前に質問に答えました。他のすべての回答はjavascriptまたはjQueryであり、純粋なHTML / CSSが役立つと感じたため、これを追加しました。

于 2016-04-03T06:27:33.393 に答える
7

少しのjQueryを使用してもかまわない場合は、簡単に説明します。コンテナdivの「click」イベントを使用して1つの場所に移動し、内側のアンカーリンクで「event.stopPropagation」メソッドを使用して、外側のクリックイベントの発生を停止できます。

http://jsfiddle.net/timcuculic/a7p13rdy/2/

    <script>
    $(".containerdiv").click(function () {
        window.open(
          'https://www.google.com/',
          '_blank'
        );
    });

    $("a").click(function (event) {
        event.stopPropagation();
    });
</script>
于 2015-05-21T00:08:35.553 に答える
5

試す 

 <a href="your link"><div></div></a>

または少しjavascriptで

<a href="link1">
    <div>outer  link
        <img  src="image" />
        <p onclick="window.location.href='otherlink'"> inner link</p>
    </div>another
</a>

jsfiddle

于 2012-11-18T05:39:16.780 に答える