如何使整个div成为链接，但如何在其中包含其他链接? [英] How can I make an entire div a link, but also have other links inside?
问题描述
我有一个div.当您单击它时，我希望它链接到某个地方，但是我也想在其中放置其他链接，因此，当您单击其他链接时，您将被重定向到一个地方，但是如果您单击其他任何地方，那么您将被重定向到某个地方其他.
I have a div. I want it to link somewhere when you click on it, but I also want to put other links inside it, so when you click on the other links you're redirected to one place, but if you click anywhere else you're redirected somewhere else.
这是一个简单的例子.实际上，无论我做什么，内部"链接都位于外部"链接之外.
Here's a simple example. As it is, the "interior" link is located outside of the "exterior" link, no matter what I do.
<a href="#" class="exterior">
<a href="#">interior</a>
</a>
小提琴: https://jsfiddle.net/p4ugexf4/
推荐答案
您可以在链接的父元素上使用javascript onclick事件:
You can use the javascript onclick event on the parent element of the link(s):
.exterior {
display: block;
width:100px;
height:100px;
border: 1px black solid;
}
<div onclick="document.location.href='https://example.com';return true;" class="exterior">
<a href="https://stackoverflow.com">interior</a>
</div>
我不建议在<a>元素中使用<a>.在<a>中使用<a>无效.您可以在 W3C验证器中查看以下文档:
I don't recommend to use <a> in <a> element. Using <a> in <a> isn't valid. You can check the following document on the W3C validator:
<!DOCTYPE html>
<html>
<head>
<title>test link in link</title>
</head>
<body>
<a href="#" class="test1">
<a href="#" class="test2">test</a>
</a>
</body>
</html>
您还可以使用两个不同的<a>元素(不使用javascript-仅CSS解决方案):
You can also use two different <a> elements (without using javascript - only CSS solution):
div {
position:relative;
border:1px solid red;
height:200px;
width:200px;
}
div a.ext {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:0;
}
div a.int {
position:relative;
z-index:999;
}
<div>
<a class="ext" href="https://example.com"></a>
<a class="int" href="https://stackoverflow.com">test</a>
</div>
这篇关于如何使整个div成为链接，但如何在其中包含其他链接?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
