带有 <script> removeClass 和 addClass 的标签

Question

我正在尝试在选项卡内添加视频，这里是一个示例

<script data-config="//config.playwire.com/17003/videos/v2/3745040/zeus.json" data-css="//cdn.playwire.com/bolt/js/zeus/skins/default.css" data-height="480" data-width="853" src="//cdn.playwire.com/bolt/js/zeus/embed.js" type="text/javascript"></script>

我的问题是每次我切换标签时都不显示视频

使用 iframe 视频正常

这是我到目前为止尝试过的方法：

jQuery:

$('document').ready(function() {
    $("#sidebar").tabs({
        event: "click",
        activate: function (event, ui) {
            console.log(ui);
            var _tab = ui.newTab;
            $('#sidebar li').removeClass('active');
            $(_tab).addClass('active');
        },
    });
});

HTML:

<div id="sidebar">
<ul>
<li><a href="#tabs-1">Video1</a></li>
<li><a href="#tabs-2">Video2</a></li>
<li><a href="#tabs-3">Video3</a></li>
</ul>
<div id="tabs-1">
<script data-config="//config.playwire.com/17003/videos/v2/3714373/zeus.json" data-css="//cdn.playwire.com/bolt/js/zeus/skins/default.css" data-height="390" data-width="630" src="//cdn.playwire.com/bolt/js/zeus/embed.js" type="text/javascript"></script>
</div>
<div id="tabs-2">
<script data-config="//config.playwire.com/17003/videos/v2/3745793/zeus.json" data-css="//cdn.playwire.com/bolt/js/zeus/skins/default.css" data-height="390" data-width="630" src="//cdn.playwire.com/bolt/js/zeus/embed.js" type="text/javascript"></script>
</div>
<div id="tabs-3">
<script data-config="//config.playwire.com/17003/videos/v2/3745040/zeus.json" data-css="//cdn.playwire.com/bolt/js/zeus/skins/default.css" data-height="390" data-width="630" src="//cdn.playwire.com/bolt/js/zeus/embed.js" type="text/javascript"></script>
</div>
</div>

http://jsfiddle.net/UnYx9/6/

Answer 1

您的其他视频没有高度。

试试这个：

#tabs-2 div, #tabs-3 div {
     height: 390px !important;
}

带有 <script> removeClass 和 addClass 的标签

Tabs with <script> removeClass & addClass

jquery

addclass

removeclass