在div链接内链接

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>

当然,我以为我是谁想到这唯一的一个,但这个问题已经有了答案之前.我添加了这个,因为所有其他答案都是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