22

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

4

4 回答 4

37

这在 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>ap

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

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

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

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

于 2012-11-18T06:59:26.267 回答
8

有一种方法可以在没有任何 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>

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

于 2016-04-03T06:27:33.393 回答
7

小菜一碟，如果你不介意使用一点 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>
于 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 回答