带有显示/隐藏 youtube 视频的 jquery 选项卡内容答案

【问题标题】：jquery tab content with show/hide of youtube videos带有显示/隐藏 youtube 视频的 jquery 选项卡内容
【发布时间】：2011-09-05 17:34:09
【问题描述】：

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

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

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

我正在使用我在这里找到的一些代码：Flash video still playing on DIV that is removed using jQuery (IE bug) - 删除视频并克隆它，因为我在 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);
});

感谢您提供的任何帮助！！！

【问题讨论】：

标签： jquery tabs clone show-hide

【解决方案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 和 clone 的所有内容是做什么用的，所以我跳过了。

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

【讨论】：