显示 div 的 iframe onclick

Question

我有一个div，其中包含一个通过 CSS 生成的图像 src，我想在单击 div 中的图像时显示一个iframe。通过在 iframe 周围包裹一个标签并使用 jQuery 编写一个 click 函数，我能够成功地在一个简单的文本值上显示 iframe。但是，我无法让它与div 中的图像一起使用。我的 jQuery 函数如何在我的 div 中被调用？我的div 中是否需要onclick 事件？

$(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 都不需要

只需 HTML 即可更改 <iframe> 的 src

要求

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

2. 链接也需要[target] 属性。将<iframe> 的[name] 属性赋予它（请参阅下一步）。

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

3. <frame> 只需要一个[name]。

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

参见演示 1

---

还有一个jQuery版本见Demo 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) 指向没有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"));
  })
});