Как я могу сделать весь div ссылкой, но также иметь другие ссылки внутри?

У меня есть div. Я хочу, чтобы он ссылался где-то, когда вы нажимаете на него, но я также хочу поместить в него другие ссылки, поэтому, когда вы нажимаете на другие ссылки, вы перенаправляетесь в одно место, но если вы щелкаете в другом месте, вы перенаправляетесь куда-то остальное.

Вот простой пример. Как таковая, внутренняя ссылка находится вне внешней ссылки, независимо от того, что я делаю.

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

скрипка: https://jsfiddle.net/p4ugexf4/

Источник

6 ответов

Вы можете использовать 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://stackru.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://stackru.com">test</a>
</div>

Источник

Простое, практичное, не 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>
Источник 

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

демонстрация

Источник

Вы можете использовать абсолютное позиционирование

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

Источник 
$(".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://stackru.com/questions/tagged/css">interior</a>
</div>

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

Я использовал остановку распространения на элементе, чтобы он не вызывал щелчок по элементу div. И я использовал div в качестве оболочки, так что вам нужно будет поместить windows.location, если вы хотите перенаправить на URL внутри функции click.

Я не уверен, как вы можете достичь этого просто с помощью HTML и CSS. Так что я бы предложил использовать jquery.

Источник

Вы можете использовать позиционирование для отображения ссылки в другой ссылке / контейнере.

Я создал пример, он не идеален, но даст вам представление.

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;
}
Источник
Другие вопросы по тегам