我怎樣才能讓一個整體的鏈接，但也有其他的鏈接裏面？

我有一個div。我希望它在某處點擊鏈接，但我也想將其他鏈接放在其中，所以當你點擊其他鏈接時，你將被重定向到一個地方，但是如果你點擊了其他任何地方，你會被重定向到某個地方其他。我怎樣才能讓一個整體的鏈接，但也有其他的鏈接裏面？

下面是一個簡單的例子。事實上，無論我做什麼，「內部」鏈接都位於「外部」鏈接之外。

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

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

來源

2017-07-17 Joe Morano

爲什麼你要把裏面的鏈接的鏈接？當然，這不是一個好主意。你如何期待它的工作？ – error404

@AnululHasan好吧，如果你點擊內部鏈接，它會把你帶到那個鏈接，如果你點擊其他任何地方，它會把你帶到別的地方。 –

這個問題沒有javascript標記。你想要一個JavaScript解決方案嗎？ – Danield

您可以將鏈接（S）的父元素使用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>

來源

2017-07-17 07:54:04

我認爲'return false'必須是'return true'。 –

簡單實用的非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>

來源

2017-07-17 07:55:53 Danield

您可以在元素上使用絕對定位

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

來源

2017-07-17 07:56:15 Gerard

你不能嵌套'a'元素。這個「HTML」是無效的。 –

$(".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作爲包裝，所以如果你想重定向到點擊函數中的一個url，你將不得不放置一個windows.location。

我不確定如何用簡單的html和css實現這一點。所以我會建議使用jQuery。

來源

2017-07-17 08:02:55 user5014677

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

demo

來源

2017-07-17 09:06:34 bhv

你可以用定位來顯示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; 
}

來源

2017-07-17 11:33:21 MartynMc

我怎樣才能讓一個整體的鏈接，但也有其他的鏈接裏面？

回答

相關問題