jquery 选项卡内容与显示/隐藏 YouTube 视频

Question

我有一个视频部分，设置如下：

页面加载时默认显示一个视频

有两个内容选项卡 - 每个选项卡包含一个视频缩略图列表。当您单击其中一个缩略图时，默认视频会消失，而单击的视频会显示在其位置。

我正在使用在这里找到的一些代码： Flash 视频仍在使用 jQuery 删除的 DIV 上播放（IE 错误） - 删除视频并克隆它，因为我遇到了问题IE 中，即使正在加载新视频，上一个视频仍在播放。

现在在 IE9 中，视频的第一个选项卡列将不会被替换。然而，第二个选项卡列将会。

这是 HTML：

<div class="video-holder">

  <div id="video17" class="large-video" style="display: none;">
   <div class="embed-video">the video</div>
  </div>

  <div id="video18" class="large-video" style="display: none;">
   <div class="embed-video">the video</div>
  </div>

  <div id="video19" class="large-video" style="display: none;">
   <div class="embed-video">the video</div>
  </div>

  <div id="video20" class="large-video" style="display: none;">
   <div class="embed-video">the video</div>
  </div>

</div>

<ul>
<li><a href="#video-tab1">Tab 1</a></li>
<li><a href="#video-tab2">Tab 2</a></li>
</ul>

<div id="video-tab1">
    <a href="#" id="link17" class="video-link">thumbnail</a>
    <a href="#" id="link18" class="video-link">thumbnail</a>
</div>

<div id="video-tab2">
    <a href="#" id="link19" class="video-link">thumbnail</a>
    <a href="#" id="link20" class="video-link">thumbnail</a>
</div>

这是 JS：

jQuery(".large-video").hide(); //hides all the .large-video divs
jQuery("#video17").show(); // this is the default video to show

jQuery(".video-link").click(function(e){
e.preventDefault();
$(".large-video").hide()
$("#video"+$(this).attr("id").replace("link","")).show();    
 var clone = $(".large-video").clone(true);
$(".large-video").remove();
$(".video-holder").html(clone);
});

感谢您提供的任何帮助！

Answer 1

这就是我要做的：

$(document).ready( function() {
$(".large-video").hide(); //hides all the .large-video divs
$("#video17").show(); // this is the default video to show
$(".video-link").click(function(){
$(".large-video").hide();
$("#video"+$(this).attr("id")).show();    
});
});

然后你的链接应该是：

<div id="video-tab1">
    <a href="#" id="17" class="video-link">thumbnail</a>
    <a href="#" id="18" class="video-link">thumbnail</a>
</div>

<div id="video-tab2">
    <a href="#" id="19" class="video-link">thumbnail</a>
    <a href="#" id="20" class="video-link">thumbnail</a>
</div>

所以基本上它所做的就是等待文档准备好，然后隐藏所有视频 div 并显示默认 div (#video17)。然后，当您单击链接时，它会添加“#video”部分，然后添加 id 标记，并显示生成的 div。因此 ID 为“19”的链接将变为“#video19”。我不确定所有 .remove 和克隆内容的用途是什么，所以我跳过了它。

希望这会有所帮助，或者至少让您朝着正确的方向前进。