Bootstrap 3.0 - 在可选项卡窗格中显示多个 Facebook 相册

Question

大家晚上好，

我有一个 3 个选项卡窗口，我希望每个选项卡在用户单击相应选项卡时显示不同的 Facebook 相册。第一个（和默认）选项卡完美运行。但是，当我单击第二个选项卡时，它只显示黑屏。似乎我在 tab2 中输入的任何 FB 专辑 ID 都会覆盖 tab1 的内容。欢迎任何帮助。提前致谢。

这是 HTML：

<div class="tab-content">

  <div class="tab-pane active" id="tab1">
    <div id="galleria">
    <script>
       Galleria.loadTheme('js/galleria/themes/classic/galleria.classic.min.js');
       Galleria.run('#galleria', {
            facebook: 'album:303814463041408',
            width: 458,
            height: 250,
            wait:true,
            lightbox: true});
     </script>
     </div>
   </div>

   <div class="tab-pane" id="tab2">
     <div id="galleria">
     <script>
        Galleria.loadTheme('js/galleria/themes/classic/galleria.classic.min.js');
        Galleria.run('#galleria', {
           facebook: 'album:323687541054100',
           width: 458,
           height: 250,
           wait:true,
           lightbox: true});
       </script>
       </div>
   </div>

   <div class="tab-pane" id="tab3">
      <p>tab3 tab3 tab3</p>
   </div>

</div>

Answer 1

这可能是因为两个选项卡的内容使用相同的 ID galleria。尝试将它们更改为 id="galleria1" 和 id="galleria2"，然后更新每个脚本以定位适当的 div：#galleria1 和 #galleria2。