javascript - 在 Twitter Bootstrap 选项卡中使用多个图像库

Question

我创建了 3 个基于SlidesJS的图片库，并将它们放在Twitter Bootstrap Tabs中。

你可以在这里看到演示。

如您所见，画廊已正确填充并放置在选项卡内；但是，不会显示第二个和第三个画廊的图像。

我猜这可能是标签的内容被隐藏并与图库 css 冲突的问题？

你有什么解决办法吗？

回答：

根据以下建议，我最终以这种方式使用它：

$(document).ready(function(){
    $('#slides0').slidesjs({ width: 918, height: 200, navigation: false });
    $("#gallery-tab a").each(function( index ) {
        $(this).on('shown', function(){
            $('#slides' + index).slidesjs({ width: 918, height: 200, navigation: false });
        });
    });
});      

Answer 1

大多数标签方案中最常见的问题是，当标签被隐藏时，您正在初始化画廊，因此插件无法计算大小，并在选项卡子元素上执行其他操作，而这些操作是不可见的。

您可以 1）在选项卡选择上初始化图库插件，或 2）使用类似的东西{position: absolute; left: -999em;}而不是{display: none}隐藏选项卡。

更新：根据您的评论，这应该有效......

$('#gallery-tab a:first[data-toggle="tab"]').on('shown', function () {
   $('#slides0').slidesjs({ width: 918, height: 200, navigation: false });
})