从一个按钮更改 iframe 目标并关闭目标 div

请参阅下面的代码，我试图实现的是，当用户单击"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>

你的 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>

相关内容

最新更新

热门标签：