JQuery вкладка контента с шоу / скрыть видео YouTube

Question

У меня есть раздел видео, который настроен следующим образом:

Одно видео отображается по умолчанию при загрузке страницы

Есть две вкладки контента - каждая вкладка содержит список видеоэскизы.Когда вы нажимаете на одну из миниатюр, видео по умолчанию исчезает, и видео, на которое вы нажали, отображается на своем месте.

Я использую немного кода, который нашел здесь: Flash-видео, все еще воспроизводимое на DIV, которое удаляется с помощью jQuery (ошибка 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.Таким образом, ссылка с идентификатором «19» становится «# video19».Я не был уверен, для чего нужны все элементы .remove и clone, поэтому я пропустил это.

Надеюсь, это поможет или, по крайней мере, направит вас в правильном направлении.