Html div 链接内的链接

Link inside a div link

提问by michaellindahl

I would like to have a div that contains an image and some text be a link. So that one can click anywhere (not necessarily the image or text) in the div and be taken to one location. However I would also like there to be another link at the end of the text that brings the user to another location. However, once I add this second link the whole div no longer is a link and just the image and text are links. Is what I am want to do possible?

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

回答by Jukka K. Korpela

It is not possible in HTML, since an aelement inside an aelement is not allowed. By existing HTML specs, you cannot have e.g, divinside aeither, but this restriction was never really enforced by browsers and it has been lifted in HTML5 drafts. Nested aelements are a different issue, since it would create an active area inside an active, and its meaning would need to be defined and it would be confusing.

这在 HTML 中是不可能的，因为a元素内的a元素是不允许的。根据现有的 HTML 规范，您不能div在a其中使用例如，inside ，但浏览器从未真正强制执行此限制，并且已在 HTML5 草案中取消。嵌套a元素是一个不同的问题，因为它会在一个活动中创建一个活动区域，它的含义需要定义并且会令人困惑。

What happens in practice when using

实际使用时会发生什么

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

is that it works the way you want except that content of the outer aelement after the inner aelement is not a link at all. Apparently browsers are not prepared to handling constructs like this. Effectively, they imply a closing </a>tag when they encounter an <a>tag when an aelement is open. Much like they do for pelements.

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

So an inner link at the end of a link would sort-of work. There is of course no guarantee that it will keep working in future versions of browsers, or that it works on all browsers.

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

You could use two separate, non-nested aelements in succession and to place the second one visually inside the first one, using CSS positioning. But this would get somewhat complicated. A much simpler approach is to set up a JavaScript pseudo-link:

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

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

The downside is that it won't act in a link-like manner when JavaScript is disabled, and search engines won't treat it as a link either.

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

回答by Stigwood

There is a way to do this without any javascript using absolute and relative positioning. This also keeps the code semantic for SEO, which the javascript struggles to do.

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

Naturally I thought I was the only one who thought of this, but the question has been answered before. I added this because all the other answers were javascript or jQuery, and felt a pure HTML/CSS one could be useful.

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

回答by Tim Cuculic

Piece of cake, if you don't mind using a little jQuery. You can use the 'click' event on the container div to take you to one location, then use the 'event.stopPropagation' method on the inner anchor link to stop the outer click event from firing.

小菜一碟，如果您不介意使用一点 jQuery。您可以使用容器 div 上的 'click' 事件将您带到一个位置，然后使用内部锚链接上的 'event.stopPropagation' 方法来停止触发外部点击事件。

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

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

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

    $("a").click(function (event) {
        event.stopPropagation();
    });
</script>

回答by NullPoiиteя

try

尝试

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

or with little javascript

或者用很少的 javascript

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

jsfiddle

提琴手