显示div的iframe onclick

Question

我有一个div，其中包含通过CSS生成的图像src，并且我想在单击div中的图像时显示一个iframe。通过在其周围包装标签并使用jQuery编写click函数，我能够在简单的文本值上成功显示iframe。但是，我无法将其用于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的{​​{1}}仅需要HTML

要求

1. 指向您要<iframe>指向的站点的[href]的链接。

2. 该链接也需要一个<iframe>属性。为其赋予[target]的{​​{1}}属性（请参阅下一步）。

   [name]

3. <iframe>仅需要一个<a href="https://example.com" target="brand"></a> 。

   <frame>

请参见演示1

---

还有一个jQuery版本，请参见演示2

---

演示1

[name]

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

---

演示2

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

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

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）指向没有href值的#containerA

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