如何使整个div成为一个链接，但也包含其他链接？

Question

如何使整个div成为一个链接，但也包含其他链接？

3

我有一个div元素。我希望当你点击它时，它可以链接到某个地方，但我也想在它里面放其他链接，所以当你点击其他链接时，你会被重定向到一个地方，但如果你点击其他任何地方，你会被重定向到另一个地方。

以下是一个简单的例子。无论我做什么，"interior"链接始终位于"exterior"链接之外。

<a href="#" class="exterior">
  <a href="#">interior</a>
</a>

fiddle: https://jsfiddle.net/p4ugexf4/

- Joe Morano

2

为什么要在链接中嵌套链接？显然这不是一个好主意。你希望它如何工作？ - error404

@AnamulHasan 如果您点击内部链接，它会带您到该链接，如果您在其他任何地方点击，它会带您到其他地方。 - Joe Morano

这个问题没有 JavaScript 标签。您需要一个 JavaScript 解决方案吗？ - Danield

@Danield 我知道如何用 JavaScript 解决它，但我更愿意使用 HTML/CSS。 - Joe Morano

6个回答

1

一个简单、实用、无需JavaScript的解决方案：

将主链接分成较小的块，例如：

<div>
  <a href="#" class="exterior">First part of exterior link</a>
  <a href="#">interior</a> 
  <a href="#" class="exterior">Second part of exterior link etc</a>
</div>

- Danield

0

您可以使用绝对定位

.exterior {
  display: block;
  width:100px;
  height:100px;
  border: 1px black solid;
  position: relative;
}
.interior {
  position: absolute;
  top: 20px;
  left: 20px;
}

<a href="bla" class="exterior">
  <a class="interior" href="blabla">Interior</a>
</a>

- Gerard

您不能嵌套a元素。这个HTML是无效的。 - Mohammad Usman

0

.exterior {
  display: block;
  width:100px;
  height:100px;
  border: 1px black solid;
}

<a href="http://bing.com" class="exterior">
  <object><a href="http://example.com">Interior</a></object>
</a>

演示

- bhv

0

$(".exterior a").click(function(e){
    alert('a clicked but div not triggered');
    e.stopPropagation();
});

$(".exterior").click(function(e){
    alert("div clicked but not a");
})

<div href = "#" class="exterior">
  <a href="https://stackoverflow.com/questions/tagged/css">interior</a>
</div>

.exterior{
width: 500px;
height: 100px;
background-color: red;
}

我在一个元素上使用了stop propagation来防止它触发div的点击事件。我使用div作为包装器，所以如果你想在点击函数中重定向到一个url，你必须放置一个windows.location。

我不确定如何仅通过html和css实现这一点。因此，我建议使用jquery。

- user5014677

0

您可以使用定位来在另一个链接/容器中显示链接。

我创建了一个示例，它并不完美，但会给您一个想法。

https://codepen.io/MartynMc/pen/gRyqXL

HTML：

<div class="container">
  <a class="link1" href="link1.com"></a>
  <a class="link2" href="link2.com">link2</a> 
</div>

CSS：

.container {
  width: 250px;
  height: 250px;
  border: 2px solid;
  position: relative;
}
.link1 {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
}
.link2 {
  display: block;
  top: 75px;
  left: 50px;
  font-size: 24pt;
  position: absolute;
  width: 150px;
  height: 50px;
  border: 2px solid red;
  text-align: center;
  line-height: 50px;
}

- MartynMc

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sebastian Brosch · Accepted Answer

您可以在链接的父元素上使用javascript onclick 事件：

.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验证器上查看以下文档:

<!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解决方案）：

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>