Question

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

这是一个简单的例子。事实上，无论我做什么，“内部”链接都位于“外部”链接之外。

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

小提琴：https://jsfiddle.net/p4ugexf4/

Answer 1

您可以在链接的父元素上使用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 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解决方案）：

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>

Answer 2

一个简单，实用，非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>

Answer 3

您可以使用绝对定位

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

Answer 4

$(".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;
}

我在元素上使用了停止传播，以防止它触发div上的点击。我使用div作为包装器，所以如果你想重定向到click函数内的url，你必须放一个windows.location。

我不确定如何通过简单的html和css实现这一目标。所以我建议使用jquery。

Answer 5

＆＃13;

Thread

＆＃13;

run()

＆＃13;

demo

Answer 6

您可以使用定位在anoter链接/容器中显示链接。

我创造了一个例子，它并不完美，但会给你一个想法。

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

如何将整个div作为链接，还有其他链接？

6 个答案: