Отображение iframe по клику div

Question

У меня есть div, который содержит изображение src через CSS, и я хочу отобразить iframe при нажатии на изображение внутри div.Мне удалось успешно отобразить iframe на простом текстовом значении, обернув его тегом и написав функцию щелчка с помощью jQuery.Однако я не смог заставить это работать с моим изображением, которое находится в пределах div.Как моя функция jQuery вызывается в моем div?Нужно ли мне onclick событие в моем div?

$(document).ready(function() {
  $("#containerA").click(function(e) {
    e.preventDefault();
    $("brand").attr("src", $(this).attr("href"));
  })

});

.containerA {
  width: 140px;
  height: 99px;
}

.containerA:hover {
  background: url("img/imageB_05.jpg") no-repeat;
  background-size: contain;
}

.imageA:hover {
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="containerA" id="containerA" style="width: 140px; height: 99px"></div>

<iframe id="brand" src="http://www.blah.com">

Answer 1

jQuery / JavaScript или даже CSS не требуется

Для изменения src <iframe>

требований * требуется только HTML

1. Ссылка с [href] сайта, на который нужно указать <iframe>.

2. Ссылка также нуждается в атрибуте [target].Присвойте ему [name] атрибут <iframe> (см. Следующий шаг).

   <a href="https://example.com" target="brand"></a>
   

3. Для <frame> просто требуется [name].

   <iframe name="brand"></iframe>
   

См. Демо 1

---

Есть также версия jQuery, см. Демо 2

---

Демо 1

.containerA {
  width: 70vw;
  height: 30vh;
  outline: 1px dashed red;
}

.containerA a {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: inline-block;
  height: 100%;
  width: 30%;
  text-decoration: none;
  transition: opacity 1.2s;
  opacity: 0;
}

.containerA a:hover {
  transition: opacity 0.75 ease;
  opacity: 1;
}

a:first-of-type {
  background-image: url(https://i.ibb.co/5LPXSfn/Lenna-test-image.png);
}

a:nth-of-type(2) {
  background-image: url(https://i.ibb.co/ZHvWsKb/o1z7p.jpg)
}

a:last-of-type {
  background-image: url(https://i.ibb.co/tmQZgJb/68eb2df1a189f88bb0cbd47a3e00c112.png)
}

iframe {
  width: 70vw
}

<div class="containerA">
  <a href='https://example.com' target='brand'></a>
  <a href='https://plnkr.co' target='brand'></a>
  <a href='https://codepen.io' target='brand'></a>
</div>
<iframe name="brand"></iframe>

---

Демо 2

$('.containerA').click(function(e) {
  var url = $(this).data('url');
  $('#brand').attr('src', url);
});

.containerA {
  width: 70vw;
  height: 30vh;
  outline: 1px dashed red;
  background: url(https://i.ibb.co/ZHvWsKb/o1z7p.jpg)no-repeat center;
  background-size: contain;
  cursor: pointer;
}

iframe {
  width: 70vw
}

<div class='containerA' data-url='https://example.com'></div>
<iframe id='brand' src='about:blank'></iframe>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

$(document).ready(function() {
  $("#containerA").click(function(e) {
    e.preventDefault();
    //use iframe id as selector
$("#brand").attr("src", $('#containerA a').attr("href"));
  })

});

.containerA {
  width: 140px;
  height: 99px;
}

.containerA:hover {
  background: url("img/imageB_05.jpg") no-repeat;
  background-size: contain;
}

.imageA:hover {
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="containerA" id="containerA" style="width: 140px; height: 99px">
<a href="http://something.com">xxx</a>
</div>

<iframe id="brand" src="http://www.blah.com">

Answer 3

// div #containerA не имеет атрибута HREF, потому что это не тег A

// это должен быть #brand, а $ (this) указывает на #containerA, у которого нет значения href

<div class="containerA" id="containerA" style="width: 140px; height: 99px">
   <a href="http://something.com">Something</a>
</div>


$(document).ready(function() {
   $("#containerA").click(function(e) {
     e.preventDefault();
     $("#brand").attr("src", $('#containerA a').attr("href"));
  })
});