一键更改 iframe 目标并关闭目标 div答案

【问题标题】：Change iframe target and close target div from one button一键更改 iframe 目标并关闭目标 div
【发布时间】：2017-03-21 10:55:53
【问题描述】：

请参阅下面的代码，我想要实现的是，当用户单击“Div 1”时，菜单会滑动打开以选择 Web 1，但是单击该菜单时，菜单会关闭并且 iframe 会发生变化。

目前只有隐藏菜单或更改 iframe 有效，但不能同时使用。

我添加了第二个“Div 2”来显示 iframe 的变化。

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.2.0.js" integrity="sha256-wPFJNIFlVY49B+CuAIrDr932XSb6Jk3J1M22M3E2ylQ=" crossorigin="anonymous"></script>
  <style>
    .targetDiv {
      display: none;
      background-color: red;
      width: 200px;
      height: 100px;
      display: none;
      position: absolute;
      left: 10px;
      top: 50px;
    }
    
    .iframe {
      bottom: 0px;
      left: 0px;
      position: absolute;
      width: 500px;
      height: 500px;
    }
  </style>
</head>

<body>
  <div>
    <a class="showSingle">Div 1</a>
  </div>
  <div>
    <a class="showSingle">Div 2</a>
  </div>
  <div class="targetDiv">
    <a href="http://www.skysports.com/" class="showSingle" target="myiframe">Web 1</a>
  </div>
  <div class="targetDiv">
    <a href="http://www.bbc.co.uk/news" target="myiframe">Web 2</a>
  </div>

  <iframe src="http://www.bing.com/" name="myiframe" class="iframe"></iframe>
</body>

</html>
<script>
  jQuery(function() {
    jQuery('.showSingle').click(function() {
      var index = $(this).parent().index(),
        newTarget = jQuery('.targetDiv').eq(index);
      jQuery('.targetDiv').not(newTarget).slideUp('fast')
      newTarget.delay('fast').slideToggle('fast')
      return false;
    })
  });;
</script>

【问题讨论】：

虽然您的问题不清楚，但一个快速的解决方案是将class="showSingle" 添加到具有文本Web2 的a，您忘记了。

标签： javascript jquery html css iframe

【解决方案1】：

你的 iframe 屏蔽了你的 div，所以我改变了它的样式。

您的“a”标签应具有“showSingle”类。删除后，一切正常。

$(function() {
  $('.showSingle').click(function() {
    var index = $(this).parent().index();
    console.log(index);
    var newTarget = $('.targetDiv').eq(index);
    $('.targetDiv').not(newTarget).slideUp('fast')
    newTarget.delay('fast').slideToggle('fast')
    return false;
  });
  $(".targetDiv a").click(function() {
    $('.targetDiv').slideUp('fast')
  });
});

.targetDiv {
  display: none;
  background-color: red;
  width: 200px;
  height: 100px;
  display: none;
  position: absolute;
  left: 10px;
  top: 50px;
}

.iframe {
  bottom: 0px;
  left: 0px;
  top: 100px;
  position: absolute;
  width: 500px;
  height: 500px;
}

<script src="https://code.jquery.com/jquery-3.2.0.js" integrity="sha256-wPFJNIFlVY49B+CuAIrDr932XSb6Jk3J1M22M3E2ylQ=" crossorigin="anonymous"></script>

<div>
  <div>
    <a class="showSingle">Div 1</a>
  </div>
  <div>
    <a class="showSingle">Div 2</a>
  </div>
</div>
<div class="targetDiv">
  <a href="http://www.skysports.com/" target="myiframe">Web 1</a>
</div>
<div class="targetDiv">
  <a href="http://www.bbc.co.uk/news" target="myiframe">Web 2</a>
</div>

<iframe src="http://www.bing.com/" name="myiframe" class="iframe"></iframe>

【讨论】：

感谢您的回复，但我认为您误解了。我希望在单击 Web 1/Web 2 时删除红色目标 div。
我更新了答案。只需向链接添加一个点击监听器。 @JDCov87
太棒了，感谢您的帮助@blackmiaool
如果您对我的回答满意，可以接受。 :) @JDCov87