Question

我有一组带有嵌套项目的divs

<div id="second-item" class="dock-item">
  <div class="website-name">Facebook.com</div>
  <div class="website-screenshot"><img src="fb-thumb.png" /></div>
  <div class="page-name">Facebook</div>
</div>
    <div id="third-item" class="dock-item">
  <div class="website-name">Mozilla.com</div>
  <div class="website-screenshot"><img src="uwdt-thumb.jpg" /></div>
  <div class="page-name">Mozilla</div>
</div>

我有一个iframe＃frame1

<iframe id="frame1"></iframe>

当用户点击父＃second-item div时，我需要iframe＃frame1来加载facebook.com

当用户点击父＃third-item div时，我需要iframe＃frame1来加载mozilla.com

我该怎么做？

我尝试在divs＃second-item和＃third-item内添加followin onclick但是它不起作用：

'的onclick = “帧[ '帧1']。location.href = 'http://sitename.com'”'

Answer 1

通往罗马的方式很多（这里只有两种方式！）。

<!-- points on first frame-->
<div id="second-item" class="dock-item" onclick="window.frames[0].location.href='http://facebook.com'">
  <div class="website-name">Facebook.com</div>
  <div class="website-screenshot"><img src="fb-thumb.png" /></div>
  <div class="page-name">Facebook</div>
</div>
<!-- points on name -->
<div id="third-item" class="dock-item" onclick="window.frames['frame1'].location.href='http://mozilla.com'">
  <div class="website-name">Mozilla.com</div>
  <div class="website-screenshot"><img src="uwdt-thumb.jpg" /></div>
  <div class="page-name">Mozilla</div>
</div>
<iframe id="frame1" name="frame1"></iframe>

更好的解决方案：

<!-- points on id -->
<div id="fourth-item" class="dock-item" onclick="document.getElementById('frame1').src='http://www.phpclasses.org';return false;">
  <div class="website-name">phpclasses.org</div>
  <div class="website-screenshot"><img src="uwdt-thumb.jpg" /></div>
  <div class="page-name">PhpClasses</div>
</div>

通过单击带有嵌套div的div来加载iframe

1 个答案: