0

我在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
4

1 回答 1

1

您可以通过使用 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属性。

于 2013-05-30T00:05:52.807 回答