div链接内的链接[重复]

Question

我想要一个包含图像和一些文本的 div 作为链接。这样人们就可以单击 div 中的任何位置（不一定是图像或文本）并被带到一个位置。但是，我还希望在文本末尾有另一个链接，将用户带到另一个位置。但是，一旦我添加了第二个链接，整个 div 就不再是链接，而只是图像和文本是链接。我想做的事有可能吗？

Answer 1

这在 HTML 中是不可能的，因为在 a 元素中的 a 元素是不允许的。根据现有的 HTML 规范，您也不能在 a 中包含 div，但浏览器从未真正执行过此限制，并且已在 HTML5 草案中取消。嵌套的a 元素是一个不同的问题，因为它会在活动中创建活动区域，并且需要定义其含义并且会造成混淆。

实际使用时会发生什么

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

除了内部a 元素之后的外部a 元素的内容根本不是链接之外，它是否以您想要的方式工作。显然浏览器还没有准备好处理这样的结构。实际上，当a 元素打开时遇到<a> 标记时，它们暗示关闭</a> 标记。就像他们对 p 元素所做的那样。

因此，链接末尾的内部链接会起作用。当然，不能保证它会在未来版本的浏览器中继续工作，或者它可以在所有浏览器上工作。

您可以连续使用两个单独的、非嵌套的 a 元素，并使用 CSS 定位将第二个元素可视地放置在第一个元素中。但这会变得有些复杂。一个更简单的方法是设置一个 JavaScript 伪链接：

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

缺点是在禁用 JavaScript 时它不会以类似链接的方式运行，搜索引擎也不会将其视为链接。

Answer 2

有一种方法可以在没有任何 javascript 的情况下使用绝对和相对定位来做到这一点。这也保持了 SEO 的代码语义，这是 javascript 难以做到的。

 .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>

当然，我以为我是唯一一个想到这一点的人，但这个问题已经回答了before。我添加了这个，因为所有其他答案都是 javascript 或 jQuery，并且觉得纯 HTML/CSS 可能有用。

Answer 3

小菜一碟，如果您不介意使用一点 jQuery。您可以使用容器 div 上的 'click' 事件将您带到一个位置，然后使用内部锚链接上的 '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>

Answer 4

试试

 <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