带有 <script> removeClass 和 addClass 的标签
Tabs with <script> removeClass & addClass
我正在尝试在选项卡内添加视频,这里是一个示例
<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>
您的其他视频没有高度。
试试这个:
#tabs-2 div, #tabs-3 div {
height: 390px !important;
}
我正在尝试在选项卡内添加视频,这里是一个示例
<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>
您的其他视频没有高度。
试试这个:
#tabs-2 div, #tabs-3 div {
height: 390px !important;
}