我制作了一个非常简单的下拉菜单,其中包含一系列视频'这将由iframe加载。但是,当你进入时,页面正在加载iframe。
只有当我按下“类别”时才能加载iframe的最简单方法是什么?在下拉列表中?
这可能很容易做到,但我还在学习,我无法让它发挥作用......
我的HTML:
<div class="tabbable">
<ul class="nav nav-tabs nav-pills" id="myTab">
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Videos 1<span class="caret"></span></a>
<ul class="dropdown-menu scrollable-menu" role="menu">
<li><a href="#tab1" data-toggle="tab">Video 1</a></li>
<li><a href="#tab2" data-toggle="tab">Video 2</a></li>
</ul>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab1"><iframe width="560" height="315" src="https://www.youtube.com/embed/O1KW3ZkLtuo" frameborder="0" allowfullscreen></iframe></div>
<div class="tab-pane" id="tab2"><iframe width="560" height="315" src="https://www.youtube.com/embed/xEhaVhta7sI" frameborder="0" allowfullscreen></iframe></div>
</div>
和CSS:
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
感谢您的帮助! - 这是我的Fiddle
答案 0 :(得分:0)
与链接here类似,请勿设置视频的src。而是将其存储在数据中。
一个例子是:
<iframe width="560" height="315" src="" data-src="https://www.youtube.com/embed/O1KW3ZkLtuo" frameborder="0" allowfullscreen></iframe>
使用引导程序的show.bs.tab
事件触发器,您应该可以执行此操作:
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var open_tab = $(e.target).attr('href');
var iframe = $(open_tab).find('iframe')
var iframe_src = iframe.data('src')
if(iframe.attr('src') == ""){
iframe.attr('src', iframe_src)
}
})
工作fiddle