твиттер вкладку начальной загрузки в модальном

Question

я есть модальный в Twitter Bootstrap следующим

<div id="YouTubeDialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="windowTitleLabel" aria-hidden="true"> 
      <div class="modal-header"> 
       <a href="#" class="btn btn-primary" onclick="okClicked();">Close</a> 
      </div> 
      <div class="modal-body"> 
    <div class="tabbable"> <!-- Only required for left/right tabs --> 
    <ul class="nav nav-tabs"> 
    <li><a href="#VideoListTab" data-toggle="tab">Videos</a></li> 
    <li><a href="#VideoPlayerTab" data-toggle="tab">Player</a></li> 
    </ul> 
    <div class="tab-content"> 
    <div class="tab-pane active" id="VideoListTab"> 
      <asp:GridView ID="VideoList" runat="server" AutoGenerateColumns="False" DataKeyNames="VideoID,VideoURL" OnRowDataBound="VideoList_RowDataBound" CssClass="table table-bordered"> 
        <Columns> 
         <asp:TemplateField> 
          <ItemTemplate> 
           <asp:Literal ID="VideoTitle" runat="server" /> 
           <asp:HyperLink ID="ViewYouTubeLink" runat="server" CssClass="btn" Text="View"></asp:HyperLink> 
          </ItemTemplate> 
         </asp:TemplateField> 
        </Columns> 
       </asp:GridView> 
    </div> 
    <div class="tab-pane" id="VideoPlayerTab"> 
      <iframe id="youtubeiframe" /> 
     </div> 
    </div> 
    </div> 
     </div> 
      <div class="modal-footer"> 
      <a href="#" class="btn btn-primary" onclick="okClicked();">OK</a> 
      </div> 

На первой вкладке у меня есть список видео и на второй вкладке проигрывателя.

Я хочу щелкнуть по кнопке список в первом списке и программно выбрать вторую вкладку.

Я попытался сделать это, изменив css на активную для второй вкладки, мне было интересно, есть ли лучший способ сделать это?

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

любые идеи, как это можно сделать?

c#, asp.net, jQuery and bootstrap 

Answer 1

Вы можете программно отобразить вкладку, using Javascript ссылаться на ссылку вкладки.

$('a[href="#VideoPlayerTab"]').tab('show'); 

В качестве альтернативы, вы можете дать ссылку в id или ссылаться на него какой-либо другой способ, который вы считаете нужным.

Вы можете прослушивать события табуляции ('show' и 'shown'), которые будут срабатывать всякий раз, когда отображается новая вкладка (в том числе, когда вы вызываете ее, как я показал выше).

$('a[data-toggle="tab"]').on('shown', function (e) { 
    var $previous = $(e.relatedTarget); // previous tab 

    if ($previous.data("pause")) { 
     var $pauseTab = $($previous.attr('href')); 

     // pause video either by ID or by finding it in DOM 
    } 
}); 

'show' сгорит Перед отображается вкладка вновь выбран, так что вышеупомянутое событие будет сделать паузу видео до фактического отображения вкладки другой. 'shown' будет стрелять после отображается только что выбранная вкладка. Отзывчивость предполагает, что вы, возможно, сможете приостановить приостановку воспроизведения видеопроигрывателя после повторного показа содержимого.

Примечание: в моем примере выше я использую поле данных с именем 'pause'. Для этого потребуется дополнительный атрибут ссылки проигрывателя видео: data-pause="true". Не стесняйтесь делать это по-другому, включая прямое указание атрибута href.