Html div链接中的链接

我想有一个div，其中包含一个图像和一些文本是一个链接。因此，您可以单击div中的任何位置（不一定是图像或文本），并将其带到一个位置。然而，我也希望在文本的末尾有另一个链接，将用户带到另一个位置。然而，一旦我添加了第二个链接，整个div就不再是一个链接，只有图像和文本是链接。我想做的事情可能吗？

试试看

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

---

这在HTML中是不可能的，因为

a

元素中不允许有

a

元素。根据现有的HTML规范，您也不能在

a

中包含例如

div

，但浏览器从未真正实施过这一限制，HTML5草案中也取消了这一限制。嵌套的

a

元素是一个不同的问题，因为它会在活动元素中创建一个活动区域，需要定义它的含义，并且会造成混淆

在实际使用时会发生什么

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

---

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

如果您不介意使用一点jQuery，那就太容易了。您可以使用容器div上的“click”事件将您带到一个位置，然后使用内部锚链接上的“event.stopPropagation”方法停止外部click事件的触发

$（“.containerdiv”）。单击（函数（）{
打开窗户(
'https://www.google.com/',
"空白"
);
});
$（“a”）。单击（函数（事件）{
event.stopPropagation（）；
});

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

。容器外部{
宽度：900px；
保证金：0自动；
位置：相对位置；
背景：#888；
填充物：5px；
}
.覆盖{
位置：绝对位置；
身高：100%；
宽度：100%；
顶部：0；底部：0；右侧：0；左侧：0；
背景：白色；
不透明度：0；
}
.覆盖：悬停{
不透明度：.2；
}
.文本框{
位置：绝对位置；
顶部：5px；右侧：5px；
宽度：30%；
颜色：白色；
字体：佐治亚，衬线700 14px；
}
.图像框{
宽度：68%；
}

我在考虑那些人的奇怪命运，他们古往今来都装模作样地把自己与庸俗区分开来，或者装出一副不相信任何东西或相信世界上最奢侈的东西的样子。然而，如果他们的悖论和怀疑没有给人类带来普遍不利的后果，这一点是可以接受的。但是恶作剧就在这里；当闲暇较少的人看到他们本应把全部时间都花在追求知识上，声称对所有事物一无所知，或提出与普通公认的原则背道而驰的观念时，他们就会对最重要的真理产生怀疑，他们一直认为这是神圣的

我想要两个链接

@michaellindahl在你的参考资料中，锚定标签中的每一件东西都是分开的，我不太清楚你的意思。不是所有内容都单独放在锚定标记中，如果我将所有内容单独放在锚定标记中，那么div的空白就不会是链接。

中的

不是有效的HTML！对于作为链接的整个块，是的，我会将图像和文本封装在

中。但是，如果您想在这个框中另外一个链接，那么我认为您需要考虑使用JavaScript来实现“Box”链接行为。如果设置<代码> z索引＝3，会发生什么情况？代码>用于内部链接？@Tom，没有，除非您使用定位（并修复CSS语法）。即使有了定位，它也不会改变浏览器解析标记的方式。@JukkaK.Korpela是对一些非结构化javascript解决方案的尝试。注意：jQuery依赖项可以作为下一步删除请参见注意-如果您在

a

标记中放置了一些可单击的内容（例如span），那么在

中单击内部span的
函数，您需要同时使用
event.stopPropagation（）和
事件.preventDefault（）。首先防止父onclick。第二，防止默认的
a
标记行为。对事件的评论很好。也可以
返回false
在click函数的末尾，正如@jukka-k-korpela answer使用的那样。无jquery:
document.queryselectoral（'a'）。addEventListener（'click'，函数（事件）{event.stopPropagation（）；}）
<span onclick="document.location.href = 'foo'; return false">inner link</span>

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

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