Bootstrap - 加载（onpress）选项卡/下拉内容

Posted 2023-05-09

【中文标题】Bootstrap - 加载（onpress）选项卡/下拉内容

【英文标题】：Bootstrap - Load (onpress) Tab/Dropdown Content

【发布时间】：2015-09-30 05:52:30

【问题描述】：

我制作了一个非常简单的下拉菜单，其中包含将由 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   src="https://www.youtube.com/embed/O1KW3ZkLtuo" frameborder="0" allowfullscreen></iframe></div>
    <div class="tab-pane" id="tab2"><iframe   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

【问题讨论】：

看看这个问题。 ***.com/questions/19482601/…

@ikeMiguel 所以我必须使用 JS 吗？如何在下拉列表中设置“$”并且可以调用 iframe？对不起'noobish'......

【参考方案1】：

像链接here一样，不要设置视频的src。相反，将其存储在数据中。

一个例子是：

<iframe   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

【讨论】：

感谢您的帮助！但是我不能让它在 Wordpress 上工作，但它应该可以正常工作，对吧？

不客气。当您将 src 放置到 data-src 并正确放置 javascript 时，Wordpress 应该没有问题。它仍然像以前一样加载吗？

它根本没有显示任何内容，这是问题所在，但似乎是 Wordpress 的问题，不知道为什么...

查看源代码时代码是否正确呈现？