Question

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

Answer 1

在HTML中不可能，因为a元素中的a元素是不允许的。根据现有的HTML规范，您不能在div内部使用a，但这种限制从未真正由浏览器强制执行，并且已在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。您可以使用＆＃39;点击＆＃39;容器div上的事件将您带到一个位置，然后使用＆＃39; event.stopPropagation＆＃39;内部锚点链接上的方法，用于阻止外部点击事件被触发。

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

在div链接内链接

4 个答案: